less syntax (1) variables and extend_html/css_WEB-ITnose-HTML Tutorial-php.cn

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

WBOY

Release： 2016-06-24 11:52:36

Original

946 people have browsed it

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

Copy after login

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

Copy after login

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

Copy after login

After compilation, it is

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

Copy after login

url:

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

Copy after login

Compiled

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

Copy after login

@import:

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

Copy after login

After compilation

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

Copy after login

Attribute name:

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

Copy after login

After compilation

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

Copy after login

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

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

Copy after login

After compilation

content: "I am fnord.";

Copy after login

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

Copy after login

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

Copy after login

Both of the above will be Compiled into the following

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

Copy after login

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

Copy after login

After compilation

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

Copy after login

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

Copy after login

After compilation

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

Copy after login

Syntax:

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

Copy after login

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

Copy after login

Nested selectors:

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

Copy after login

Compiled

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

Copy after login

Exact match:

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

Copy after login

nth:

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

Copy after login

Compile After

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

Copy after login

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"]) {}

Copy after login

Compiled

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

Copy after login

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) {}

Copy after login

After compilation

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

Copy after login

Variable selector:

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

Copy after login

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

Copy after login

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

Copy after login

After compilation

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

Copy after login

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

Copy after login

Reduce css code:

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

Copy after login

After compilation:

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

Copy after login

Use extend

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

Copy after login

After compilation

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

Copy after login