less 構文 (1) 変数と拡張

概要:

CSS の拡張機能として、Less は CSS 構文と完全に互換性があるだけでなく、新機能にも CSS 構文を使用します。この設計により学習が容易になり、いつでも CSS にフォールバックできます。 less ファイルには、ファイルの接尾辞としてlessが付きます。 HTMLで引用する場合は、次のようにCSSのように引用できます。

注: 特に明記されていない限り、この記事で説明されている内容はすべてバージョン 1.4.0 に基づいています。

変数:

変数の目的は、次のように 1 か所で値を定義し、それをどこでも使用できるようにすることで、コードの保守が容易になります。

リーリー

上記のコードは、色 #428bca を変数 @link-color に割り当て、その変数を color 属性で使用します。対応する CSS は次のとおりです。

リーリー

変数は属性値だけでなく、要素名、属性名 (1.6.0 でサポート)、URL、インポート メソッドの選択にも使用できます。以下の通り:

要素名を選択:

リーリー

にコンパイルされました

リーリー

url:

リーリー

コンパイル後

リーリー

@インポート:

リーリー

コンパイル後

リーリー

属性名:

リーリー

コンパイル後

リーリー

次のように、変数の変数名を変数にすることもできます:

リーリー

コンパイル後

リーリー

遅延読み込み:

変数は遅延読み込みをサポートしているため、定義する前に変数を使用できます。以下の通り:

リーリー

または

リーリー

上記2つをまとめると以下になります

リーリー

2 番目の変数も上記の CSS にコンパイルされる理由を尋ねてください。これは、変数が 2 回定義されると、最後の定義が有効になるためです。 CSS と同様に、同じ要素に対して異なる CSS スタイルが定義され、最後に定義されたスタイルが有効になります。別の例は以下のとおりです

リーリー

コンパイル後

リーリー

延長:

拡張セレクターはlessの疑似クラスセレクターであり、現在のセレクターをコピーして、元の不便さなしに新しいスタイルを定義します

。

<span style="color: #800000;">nav ul </span>{<span style="color: #ff0000;">
  &</span>:<span style="color: #0000ff;">extend(.inline)</span>;<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.inline </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;
}

 

编译后

<span style="color: #800000;">nav ul </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.inline,
nav ul </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;
}

语法：

<span style="color: #800000;">.a:extend(.b) </span>{}<span style="color: #800000;">
也可以这样使用
.a </span>{<span style="color: #ff0000;">
  &</span>:<span style="color: #0000ff;">extend(.b)</span>;
}

 

 

<span style="color: #800000;">.e:extend(.f) </span>{}<span style="color: #800000;">
.e:extend(.g) </span>{}<span style="color: #800000;">
// 上面等价于下面
.e:extend(.f, .g) </span>{}

 

嵌套选择器：

<span style="color: #800000;">.bucket </span>{<span style="color: #ff0000;">
  tr { 
    color</span>:<span style="color: #0000ff;"> blue</span>;
  }<span style="color: #800000;">
}
.some-class:extend(.bucket tr) </span>{}

 

编译后

<span style="color: #800000;">.bucket tr,
.some-class </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}

 

精确匹配：

<span style="color: #800000;">.a.class,
.class.a,
.class > .a </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.test:extend(.class) </span>{}<span style="color: #800000;"> // 不会匹配任何选择</span>

 

nth：

<span style="color: #800000;">:nth-child(1n+3) </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.child:extend(n+3) </span>{}

 

编译后

<span style="color: #800000;">:nth-child(1n+3) </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}

 

注意：1n+3与n+3在css中是等价的，但是在less中不等价。

属性选择器：

<span style="color: #800000;">[title=identifier] </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
[title='identifier'] </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
[title="identifier"] </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">

.noQuote:extend([title=identifier]) </span>{}<span style="color: #800000;">
.singleQuote:extend([title='identifier']) </span>{}<span style="color: #800000;">
.doubleQuote:extend([title="identifier"]) </span>{}

 

编译后

<span style="color: #800000;">[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">

[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">

[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}

 

注意：less中不区分单引号双引号

关键字all：

<span style="color: #800000;">.a.b.test,
.test.c </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> orange</span>;
}<span style="color: #800000;">
.test </span>{<span style="color: #ff0000;">
  &</span>:<span style="color: #0000ff;">hover {
    color: green</span>;
  }<span style="color: #800000;">
}

.replacement:extend(.test all) </span>{}

 

编译后

<span style="color: #800000;">.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> orange</span>;
}<span style="color: #800000;">
.test:hover,
.replacement:hover </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> green</span>;
}

 

变量选择器：

<span style="color: #800000;">@variable: .bucket;
@</span>{<span style="color: #ff0000;">variable</span>} {<span style="color: #ff0000;"> // interpolated selector
  color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.some-class:extend(.bucket) </span>{}<span style="color: #800000;">// 不会匹配任何选择元素</span>

<span style="color: #800000;">.bucket </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.some-class:extend(@</span>{<span style="color: #ff0000;">variable</span>}<span style="color: #800000;">) </span>{}<span style="color: #800000;"> // 不会匹配任何元素
@variable: .bucket;</span>

 

注意：extend不匹配变量。

@media：

<span style="color: #800000;">@media print </span>{<span style="color: #ff0000;">
  .screenClass</span>:<span style="color: #0000ff;">extend(.selector) {</span>}<span style="color: #800000;"> // extend inside media
  .selector </span>{<span style="color: #ff0000;"> 
    color</span>:<span style="color: #0000ff;"> black</span>;
  }<span style="color: #800000;">
}
.selector </span>{<span style="color: #ff0000;"> 
  color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
@media screen </span>{<span style="color: #ff0000;">
  .selector {  
    color</span>:<span style="color: #0000ff;"> blue</span>;
  }<span style="color: #800000;">
}</span>

 

编译后

<span style="color: #800000;">@media print </span>{<span style="color: #ff0000;">
  .selector,
  .screenClass { 
    color</span>:<span style="color: #0000ff;"> black</span>;
  }<span style="color: #800000;">
}
.selector </span>{<span style="color: #ff0000;"> 
  color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
@media screen </span>{<span style="color: #ff0000;">
  .selector { 
    color</span>:<span style="color: #0000ff;"> blue</span>;
  }<span style="color: #800000;">
}</span>

 

注意：extend只能匹配@media中前面定义的，在后面定义的将忽略。

使用extend重写样式：

在开发中我们会定义一些通用样式，然后单独样式在添加class，使用css的后面覆盖前面的原理来实现样式。extend也可以实现这种效果，如下：

<span style="color: #800000;">.animal </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> black</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> white</span>;
}<span style="color: #800000;">
.bear </span>{<span style="color: #ff0000;">
  &</span>:<span style="color: #0000ff;">extend(.animal)</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> brown</span>;
}

减少css代码：

<span style="color: #800000;">.my-inline-block() </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.thing1 </span>{<span style="color: #ff0000;">
  .my-inline-block;
</span>}<span style="color: #800000;">
.thing2 </span>{<span style="color: #ff0000;">
  .my-inline-block;
</span>}

 

编译后：

<span style="color: #800000;">.thing1 </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.thing2 </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 0</span>;
}

 

使用extend

<span style="color: #800000;">.my-inline-block </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.thing1 </span>{<span style="color: #ff0000;">
  &</span>:<span style="color: #0000ff;">extend(.my-inline-block)</span>;
}<span style="color: #800000;">
.thing2 </span>{<span style="color: #ff0000;">
  &</span>:<span style="color: #0000ff;">extend(.my-inline-block)</span>;
}

 

编译后

<span style="color: #800000;">.my-inline-block,
.thing1,
.thing2 </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 0</span>;
}