Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to understand variables and extend in dynamic style language less grammar". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

As an extension of CSS, Less is not only fully compatible with CSS syntax, but also uses CSS syntax as a new feature. This design makes it easy to learn Less, and you can fall back to CSS at any time. Less files are suffixed with less, and HTML can be referenced like css, as follows:

Note: everything described in this article is based on version 1.4.0 unless otherwise indicated.

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:

The code is as follows:

/ / 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:

The code 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 in 1.6.0), url and import methods. As follows:

Select the element name:

The code is as follows:

/ / Variables

@ mySelector: banner

/ / Usage

. @ {mySelector} {

Font-weight: bold

Line-height: 40px

Margin: 0 auto

}

Compiled for

The code is as follows:

.banner {

Font-weight: bold

Line-height: 40px

Margin: 0 auto

}

Url:

The code is as follows:

/ / Variables

@ images: ".. / img"

/ / usage

Body {

Color: # 444

Background: url ("@ {images} / white-sand.png")

}

After compilation

The code is as follows:

Body {

Color: # 444

Background: url (".. / img/white-sand.png")

}

@ import:

/ / Variables

@ themes: ".. /.. / src/themes"

/ / Usage

@ import "@ {themes} / tidal-wave.less"

After compilation

The code is as follows:

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

Attribute name:

The code is as follows:

@ property: color

.widget {

@ {property}: # 0ee

Background-@ {property}: # 999

}

After compilation

The code is as follows:

.widget {

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

Delayed loading:

Variables support delayed loading, so you can use them before you define them. As follows:

The code is as follows:

. lazy-eval {

Width: @ var

}

@ var: @ a

@ a: 9%

Or

The code is as follows:

.clients-eval-scope {

Width: @ var

@ a: 9%

}

@ var: @ a

@ a: 100%

Both of the above will be compiled as follows

The code is as follows:

.clients-eval-scope {

Width: 9%

}

The second one will also be compiled to the above css, 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 definition takes effect. And for example, the following one.

The code is as follows:

@ var: 0

.class1 {

@ var: 1

.class {

@ var: 2

Three: @ var

@ var: 3

}

One: @ var

}

After compilation

The code is as follows:

.class1 .class {

Three: 3

}

.class {

One: 1

}

Extend:

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

The code is as follows:

Nav ul {

&: extend (.inline)

Background: blue

}

.inline {

Color: red

}

After compilation

The code is as follows:

Nav ul {

Background: blue

}

.inline

Nav ul {

Color: red

}

Syntax:

The code is as follows:

.a: extend (.b) {}

It can also be used this way.

.a {

&: extend (.b)

}

.e: extend (.f) {}

.e: extend (.g) {}

/ / the above is equivalent to the following

.e: extend (.f, .g) {}

Nested selector:

The code is as follows:

.bucket {

Tr {

Color: blue

}

}

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

After compilation

The code is as follows:

.bucket tr

. some-class {

Color: blue

}

Exact match:

The code is as follows:

.a.class

.class.a

.class > .a {

Color: blue

}

.test: extend (.class) {} / / will not match any selections

Nth:

The code is as follows:

: nth-child (1n+3) {

Color: blue

}

.child: extend (naugh3) {}

After compilation

The code is as follows:

: nth-child (1n+3) {

Color: blue

}

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

Property Selector:

The code is as follows:

[title=identifier] {

Color: blue

}

[title='identifier'] {

Color: blue

}

[title= "identifier"] {

Color: blue

}

.noQuote: extend ([title=identifier]) {}

.singleQuote: extend ([title='identifier']) {}

.SecretleQuote: extend ([title= "identifier"]) {}

After compilation

The code is as follows:

[title=identifier]

.noQuote

.singleQuote

.doubleQuote {

Color: blue

}

[title='identifier']

.noQuote

.singleQuote

.doubleQuote {

Color: blue

}

[title= "identifier"]

.noQuote

.singleQuote

.doubleQuote {

Color: blue

}

Note: single quotation marks and double quotation marks are not distinguished in less

Keyword all:

The code is as follows:

.a.b.test

.test.c {

Color: orange

}

.test {

&: hover {

Color: green

}

}

Extend (.test all) {}

After compilation

The code is as follows:

.a.b.test

.test.c

.a.b.replacement

.replacement.c {

Color: orange

}

.test: hover

.replacement: hover {

Color: green

}

Variable selector:

The code is as follows:

@ variable: .bucket

@ {variable} {/ / interpolated selector

Color: blue

}

.some-class:extend (.bucket) {} / / does not match any selected elements

.bucket {

Color: blue

}

.some-class:extend (@ {variable}) {} / / will not match any elements

@ variable: .bucket

Note: extend does not match variables.

@ media:

The code is as follows:

@ media print {

.screenClass: extend (.selector) {} / / extend inside media

.selector {

Color: black

}

}

.selector {

Color: red

}

@ media screen {

.selector {

Color: blue

}

}

After compilation

The code is as follows:

@ 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 the style:

In development, we will define some general styles, and then add class to separate styles, using the principles behind css to override the previous principles to implement styles. Extend can also achieve this effect, as follows:

The code is as follows:

.animal {

Background-color: black

Color: white

}

.bear {

&: extend (.clients)

Background-color: brown

}

Reduce the css code:

The code is as follows:

.my-inline-block () {

Display: inline-block

Font-size: 0

}

.thing1 {

.my-inline-block

}

.thing2 {

.my-inline-block

}

After compilation:

The code is as follows:

.thing1 {

Display: inline-block

Font-size: 0

}

.thing2 {

Display: inline-block

Font-size: 0

}

Use extend

The code is as follows:

.my-inline-block {

Display: inline-block

Font-size: 0

}

.thing1 {

&: extend (.my-inline-block)

}

.thing2 {

&: extend (.my-inline-block)

}

After compilation

The code is as follows:

.my-inline-block

.thing1

.thing2 {

Display: inline-block

Font-size: 0

}

This is the end of "how to understand variables and extend in the dynamic style language less syntax". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.