Less syntax (1) variables and extend, lessextend

Less syntax (1) variables and extend, lessextend
Abstract:

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 it easy to learn Less, and you can roll back to CSS at any time. The less file uses less as the file suffix. HTML reference can be referenced like css, as follows:

<link rel="stylesheet/less" type="text/css" href="styles.less">

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

Variable:

The function of a variable is to define the value in one place and use it everywhere. This makes the code easier to maintain, as shown below:

// Variables @ link-color: # 428bca; // sea blue // usage a: link {color: @ link-color ;}. widget {color: # fff; background: @ link-color ;}

 

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:

a:link {  color: #428bca;}.widget {  color: #fff;  background: #428bca;}

 

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

Select element name:

// Variables@mySelector: banner;// Usage.@{mySelector} {  font-weight: bold;  line-height: 40px;  margin: 0 auto;}

 

After compilation

.banner {  font-weight: bold;  line-height: 40px;  margin: 0 auto;}

 

Url:

// Variables @ images: "../img"; // usage body {color: #444; background: url ("@ {images}/white-sand.png ");}

 

After compilation

body {  color: #444;  background: url("../img/white-sand.png");}

 

@ Import:

// Variables@themes: "../../src/themes";// Usage@import "@{themes}/tidal-wave.less";

 

After compilation

@import "../../src/themes/tidal-wave.less";

 

Property Name:

@property: color;.widget {  @{property}: #0ee;  background-@{property}: #999;}

 

After compilation

.widget {  color: #0ee;  background-color: #999;}

 

 

The variable name can also be a variable, as shown below:

@fnord:  "I am fnord.";@var:    "fnord";content: @@var;

 

After compilation

content: "I am fnord.";

 

 

Delayed loading:

Variable supports delayed loading, so you can use it before defining the variable. As follows:

.lazy-eval {  width: @var;}@var: @a;@a: 9%;

 

Or

.lazy-eval-scope {  width: @var;  @a: 9%;}@var: @a;@a: 100%;

 

Both of the above will be compiled as follows:

.lazy-eval-scope {  width: 9%;}

 

The second question will also be compiled into the css above, because the last definition takes effect when a variable is defined twice. It is similar to css, which defines different css styles for the same element, and the final definition takes effect. For example

@var: 0;.class1 {  @var: 1;  .class {    @var: 2;    three: @var;    @var: 3;  }  one: @var;}

After compilation

.class1 .class {  three: 3;}.class {  one: 1;}

 

Extend:

The extension selector is a less pseudo-class selector. It copies the current selector and defines a new style.

nav ul {  &:extend(.inline);  background: blue;}.inline {  color: red;}

 

After compilation

nav ul {  background: blue;}.inline,nav ul {  color: red;}

Syntax:

. A: extend (. B) {} can also be used in this way. a {&: extend (. B );}

 

 

. E: extend (. f) {}. e: extend (. g) {} // The above is equivalent to. e: extend (. f,. g ){}

 

Nested selector:

.bucket {  tr {     color: blue;  }}.some-class:extend(.bucket tr) {}

 

After compilation

.bucket tr,.some-class {  color: blue;}

 

Exact match:

. A. class,. class. a,. class>. a {color: blue;}. test: extend (. class) {}// no match

 

Nth:

:nth-child(1n+3) {  color: blue;}.child:extend(n+3) {}

 

After compilation

:nth-child(1n+3) {  color: blue;}

 

Note:1n + 3 and n + 3 are equivalent in css, but not in less.

Attribute selector:

[title=identifier] {  color: blue;}[title='identifier'] {  color: blue;}[title="identifier"] {  color: blue;}.noQuote:extend([title=identifier]) {}.singleQuote:extend([title='identifier']) {}.doubleQuote:extend([title="identifier"]) {}

 

After compilation

[title=identifier],.noQuote,.singleQuote,.doubleQuote {  color: blue;}[title='identifier'],.noQuote,.singleQuote,.doubleQuote {  color: blue;}[title="identifier"],.noQuote,.singleQuote,.doubleQuote {  color: blue;}

 

Note:Single quotes and double quotation marks are not distinguished in less

Keyword all:

.a.b.test,.test.c {  color: orange;}.test {  &:hover {    color: green;  }}.replacement:extend(.test all) {}

 

After compilation

.a.b.test,.test.c,.a.b.replacement,.replacement.c {  color: orange;}.test:hover,.replacement:hover {  color: green;}

 

Variable selector:

@ Variable:. bucket; @ {variable} {// interpolated selector color: blue;}. some-class: extend (. bucket) {} // does not match any selection Element

. Bucket {color: blue;}. some-class: extend (@ {variable}) {}// does not match any element @ variable:. bucket;

 

Note:Extend does not match the variable.

@ Media:

@media print {  .screenClass:extend(.selector) {} // extend inside media  .selector {     color: black;  }}.selector {   color: red;}@media screen {  .selector {      color: blue;  }}

 

After compilation

@media print {  .selector,  .screenClass {     color: black;  }}.selector {   color: red;}@media screen {  .selector {     color: blue;  }}

 

Note:The extend can only match the one defined earlier in @ media.

Rewrite the style with extend:

During development, we will define some general styles, and then add a class as a separate style. We will use css to overwrite the previous principles to implement the style. Extend can also achieve this effect as follows:

.animal {  background-color: black;  color: white;}.bear {  &:extend(.animal);  background-color: brown;}

Reduce css code:

.my-inline-block() {    display: inline-block;  font-size: 0;}.thing1 {  .my-inline-block;}.thing2 {  .my-inline-block;}

 

After compilation:

.thing1 {  display: inline-block;  font-size: 0;}.thing2 {  display: inline-block;  font-size: 0;}

 

Use extend

.my-inline-block {  display: inline-block;  font-size: 0;}.thing1 {  &:extend(.my-inline-block);}.thing2 {  &:extend(.my-inline-block);}

 

After compilation

.my-inline-block,.thing1,.thing2 {  display: inline-block;  font-size: 0;}