記事ディレクトリ
継承する
拡張キーワードの使用
extend は Less の疑似クラスです。一致する宣言からすべてのスタイルを継承します。
/* Less */
.animation{
transition: all .3s ease-out;
.hide{
transform:scale(0);
}
}
#main{
&:extend(.animation);
}
#con{
&:extend(.animation .hide);
}
/* 生成后的 CSS */
.animation,#main{
transition: all .3s ease-out;
}
.animation .hide , #con{
transform:scale(0);
}
すべてのグローバル検索と置換
セレクターによって一致したすべての宣言。
/* Less */
#main{
width: 200px;
}
#main {
&:after {
content:"Less is good!";
}
}
#wrap:extend(#main all) {
}
/* 生成的 CSS */
#main,#wrap{
width: 200px;
}
#main:after, #wrap:after {
content: "Less is good!";
}
コードの重複を減らす
表面的には、extend と method の最大の違いは、extend は同じステートメントを同じセレクターで共有するのに対し、method は独自のステートメントを使用するため、間違いなくコードの重複が増えることです。
メソッドの例は、上記の拡張と比較されます。
/* Less */
.Method{
width: 200px;
&:after {
content:"Less is good!";
}
}
#main{
.Method;
}
#wrap{
.Method;
}
/* 生成的 CSS */
#main{
width: 200px;
&:after{
content:"Less is good!";
}
}
#wrap{
width: 200px;
&:after{
content:"Less is good!";
}
}
継承のポイント
- セレクターと拡張子の間にスペースを入れることができます: pre:hover :extend(div pre)。
- pre:hover:extend(div pre):extend(.bucket tr) - これは pre:hover:extend(divpre, .bucket tr) と同じであることに注意してください。
- これは許可されていません。拡張子は最後にある必要があります: pre:hover:extend(div pre).nth-child(odd)。
- ルールセットに複数のセレクターが含まれている場合、すべてのセレクターで extend キーワードを使用できます。
輸入
ファイルのインポート
少ないファイルをインポートする場合は、接尾辞を省略できます。
import "main";
//等价于
import "main.less";
@import の位置は自由に配置可能
#main{
font-size:15px;
}
@import "style";
参照
Less の最も強力な機能は、インポートされた Less ファイルを使用しますが、コンパイルはしません。
/* Less */
@import (reference) "bootstrap.less";
一度
@import ステートメントのデフォルトの動作。これは、同じファイルが 1 回だけインポートされ、それ以降にインポートされたファイルの重複コードが解決されないことを意味します。
@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored
多数
@import (複数) を使用すると、同じ名前の複数のファイルをインポートできます。
/* Less */
// file: foo.less
.a {
color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
/* 生成后的 CSS */
.a {
color: green;
}
.a {
color: green;
}
条件式
混合条件
- 比較演算子: >、>=、=、=<、<
- フォーマット：
when() { }
// lightness() 是检测亮度的函数，用%度量
.mixin(@a) when(lightness(@a) >= 50% ) {
background-color: black;
}
.mixin(@a) when(lightness(@a) < 50% ) {
background-color: white;
}
.mixin(@a) {
color: @a;
}
.class1 {
.mixin(#ddd);
}
.class2 {
.mixin(#555);
}
//编译输出
.class1 {
background-color: black;
color: #dddddd;
}
.class2 {
background-color: white;
color: #555555;
}
タイプ検出機能
- 検出値の種類
- 色
- 番号です
- 文字列
- キーワード
- isurl
.mixin(@a: #fff; @b: 0) when(isnumber(@b)) {
color: @a;
font-size: @b;
}
.mixin(@a; @b: black) when(iscolor(@b)) {
font-size: @a;
color: @b;
}
ユニット検出機能
- 数値以外の値が特定の単位に含まれているかどうかを確認します
- ispixel
- パーセンテージ
- 名前
- いすに
mixin(@a) when(ispixel(@a)) {
width: @a;
}
.mixin(@a) when(ispercentage(@a)) {
width: @a;
}
.class1 {
.mixin(960px);
}
.class2 {
.mixin(95%);
}
//编译输出
.class1 {
width: 960px;
}
.class2 {
width: 95%;
}
関数
関数ライブラリ
- Less は、色の定義、色の操作、色の混合、文字列の処理など、多くの関数ライブラリをカプセル化します。
- たとえば、 color(): は色を解析し、色を表す文字列を色の値に変換するために使用されます。
body {
color: color("#f60");
background: color("red");
}
//编译输出
body {
color: #ff6600;
background: #ff0000;
}
- たとえば、convert(): 数値をある型 (単位) から別の型 (単位) に変換します。
- 長さの単位: m、cm、mm、in、pt、px、pc
- 時間単位: s、ms
- 角度の単位：rad（ラジアン）、deg（度）、grad（勾配）、tum（円）
body {
width: convert(20cm, px);
}
//编译输出
body {
width: 755.90551181px;
}
その他の機能については、公式ウェブサイトにアクセスしてご覧ください。https://less.bootcss.com/