less syntax (1) variables and extend_html/css_WEB-ITnose

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 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 purpose of variables is to define values ​​in one place and then use them everywhere, which makes the code easier to maintain, as follows:

// Variables@link-color:        #428bca; // sea blue// 用法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 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:

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

After compilation, it is

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

url:

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

Compiled

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

Attribute name:

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

After compilation

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

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

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

After compilation

content: "I am fnord.";

Lazy loading:

Variables support delay loaded so you can use it before the variable is defined. 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 into the following

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

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 following

@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 less Pseudo-class selector, it will copy the current selector and define a new style, and the original inconvenience

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

After compilation

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

Syntax:

.a:extend(.b) {}也可以这样使用.a {  &:extend(.b);}

.e:extend(.f) {}.e:extend(.g) {}// 上面等价于下面.e:extend(.f, .g) {}

Nested selectors:

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

Compiled

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

Exact match:

.a.class,.class.a,.class > .a {  color: blue;}.test:extend(.class) {} // 不会匹配任何选择

nth:

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

Compile After

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

Note: 1n 3 and n 3 are equivalent in css, but not equivalent 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"]) {}

Compiled

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

Note: less does not distinguish between single quotes and double quotes

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) {}// 不会匹配任何选择元素

.bucket {  color: blue;}.some-class:extend(@{variable}) {} // 不会匹配任何元素@variable: .bucket;

Note: extend does not match variables.

@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: extend can only match those defined earlier in @media, and those defined later will be ignored.

Use extend to rewrite styles:

During development, we will define some common styles, then add classes to individual styles, and use the back of 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;}