Less syntax (a) variable and extend

Summary:

As an extension of CSS, less is not only fully compatible with CSS syntax, but it also uses CSS syntax for new features. This design makes learning less easy, and you can fallback to CSS at any time. The less file is named less as the file suffix, and the HTML reference can be referred to as CSS, as follows:

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

Note: everything described in this document is based on the 1.4.0 version, unless otherwise specified.

Variable:

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:

//Variables@link-color:         {  color: @link-color;}  {  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, corresponding to the following CSS:

{  color: #428bca;}  {  color: #fff;   Background: #428bca;}

Variables can be used not only on property values, but also in selecting element names, property names (1.6.0 support), URLs, and import methods. As follows:

Select the element name:

//variables@myselector:banner;//Usage[email protected] {Myselector} {  font-weight: bold;   line-height: 40px;   margin: 0 auto;}

After compiling for

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

Url:

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

After compilation

{  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}: #0ee;  [Email protected] {Property} : #999;}

After compilation

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

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

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

After compilation

Content: "I am Fnord.";

Lazy Loading:

The variable supports lazy loading, so you can use it before the variable definition. As follows:

{  width: @var;} @var: @a;@a:9%;

Or

{  width: @var;   @a: 9%;} @var: @a;@a:100%;

All two of the above will be compiled as follows

{  width: 9%;}

Ask what the second one will also be compiled into the CSS above, because when a variable is defined two times, the last definition takes effect. Like in CSS, a different CSS style is defined for the same element, and the last definition takes effect. Like the following.

{  @var: 1;   . class {    @var: 2;     Three: @var;     @var: 3;  } One   : @var;}

After compilation

{  three: 3;}  {  one: 1;}

Extend:

The extension selector is less pseudo-class selector, he will copy the current selector, define the new style, and the original inconvenience

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

After compilation

{  background: blue;}  {  color: red;}

Grammar:

{}{  &:extend (. b);}

{}{}{}

Nested selectors:

{  tr {     color: blue;  } {}

After compilation

{  color: blue;}

Exact match:

{  color: blue;}  {} //does not match any selection

Nth

{  color: blue;} {}

After compilation

{  color: blue;}

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

Property selector:

{  color: blue;}  {  color: blue;}  {  color: blue;} {}{}{}

After compilation

{  color: blue;}  {  color: blue;}  {  color: blue;}

Note:single quotation marks are not distinguished in less

Keyword all:

{  color: orange;}  {  &:hover {    color:green;  } {}

After compilation

{  color: orange;}  {  color: green;}

Variable selector:

@variable:. bucket;@ {variable} { //interpolated selector  color: blue;}  {}//does not match any selection element

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

Note:extend does not match variables.

@media:

{  . Screenclass:extend (. selector) {} //Extend inside media  {     color: black;  }  {   color: red;}  {  . selector {      color: blue;  } }

After compilation

{  . Selector,  . screenclass {     color: black;  }  {   color: red;}  {  . selector {     color: blue;  } }

Note:extend can only match @media defined earlier, and will be ignored later.

To override a style with extend:

In development we will define some common styles, and then separate the styles by adding class, using the CSS behind the previous principle to implement the style. Extend can also achieve this effect, as follows:

{  background-color: black;   color: White;}  {  &:extend (. animal);   Background-color: Brown;}

Reduce CSS code:

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

After compiling:

{  display: inline-block;   font-size: 0;}  {  display: inline-block;   Font-size: 0;}

Using Extend

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

After compilation

{  display: inline-block;   font-size: 0;}

Less syntax (a) variable and extend