less syntax (1) variables and extend

Summary:

As an extension of CSS, Less is not only fully compatible with CSS syntax, but also uses CSS syntax for new features. This design makes learning Less easy, and you can fall back to CSS at any time. The less file has less as the file suffix. When quoting in HTML, it can be quoted like css, as follows:

Note: Everything described in this article is based on version 1.4.0, unless otherwise noted.

Variables:

The function of a variable is to define the value in one place and then use it everywhere, which makes the code easier to maintain, as follows:

<span style="color: #800000;">// Variables
@link-color:        #428bca; // sea blue

// 用法
a:link </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> @link-color</span>;
}<span style="color: #800000;">
.widget </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> @link-color</span>;
}

The above code assigns the color #428bca to a variable @link-color, and then uses the variable in the color attribute. The corresponding css is as follows:

<span style="color: #800000;">a:link </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #428bca</span>;
}<span style="color: #800000;">
.widget </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #428bca</span>;
}

Variables can be used not only in attribute values, but also in selecting element names, attribute names (supported in 1.6.0), url and import methods. As follows:

Select element name:

<span style="color: #800000;">// Variables
@mySelector: banner;

// Usage
.@</span>{<span style="color: #ff0000;">mySelector</span>} {<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
}

is compiled to

<span style="color: #800000;">.banner </span>{<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
}

url:

<span style="color: #800000;">// Variables
@images: "../img";

// 用法
body </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #444</span>;<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> url("@{images</span>}<span style="color: #800000;">/white-sand.png");
}</span>

After compilation

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #444</span>;<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> url("../img/white-sand.png")</span>;
}

@import:

<span style="color: #800000;">// Variables
@themes: "../../src/themes";

// Usage
@import "@</span>{<span style="color: #ff0000;">themes</span>}<span style="color: #800000;">/tidal-wave.less";</span>

After compilation

<span style="color: #800000;">@import "../../src/themes/tidal-wave.less";</span>

Attribute name:

<span style="color: #800000;">@property: color;

.widget </span>{<span style="color: #ff0000;">
  @{property</span>}<span style="color: #800000;">: #0ee;
  background-@</span>{<span style="color: #ff0000;">property</span>}<span style="color: #800000;">: #999;
}</span>

After compilation

<span style="color: #800000;">.widget </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #0ee</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #999</span>;
}

The variable name of a variable can also be a variable, as follows:

<span style="color: #800000;">@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;</span>

After compilation

<span style="color: #800000;">content: "I am fnord.";</span>

Lazy loading:

Variables support lazy loading, so you can use them before they are defined. As follows:

<span style="color: #800000;">.lazy-eval </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> @var</span>;
}<span style="color: #800000;">

@var: @a;
@a: 9%;</span>

or

<span style="color: #800000;">.lazy-eval-scope </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> @var</span>;<span style="color: #ff0000;">
  @a</span>:<span style="color: #0000ff;"> 9%</span>;
}<span style="color: #800000;">

@var: @a;
@a: 100%;</span>

The above two will be compiled into the following

<span style="color: #800000;">.lazy-eval-scope </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 9%</span>;
}

Ask why the second one will also be compiled into the above css. This is because when a variable is defined twice, the last definition takes effect. Just like in CSS, different CSS styles are defined for the same element, and the last defined one takes effect. Another example is the one below

<span style="color: #800000;">@var: 0;
.class1 </span>{<span style="color: #ff0000;">
  @var</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  .class {
    @var</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    three</span>:<span style="color: #0000ff;"> @var</span>;<span style="color: #ff0000;">
    @var</span>:<span style="color: #0000ff;"> 3</span>;
  }<span style="color: #800000;">
  one: @var;
}</span>

After compilation

<span style="color: #800000;">.class1 .class </span>{<span style="color: #ff0000;">
  three</span>:<span style="color: #0000ff;"> 3</span>;
}<span style="color: #800000;">
.class </span>{<span style="color: #ff0000;">
  one</span>:<span style="color: #0000ff;"> 1</span>;
}

Extend:

The extension selector is a pseudo-class selector of less. It will copy the current selector and define a new style without the original inconvenience

<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>;
}