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

This article mainly introduces "how to understand mixed attributes in dynamic style language less grammar". In daily operation, I believe many people have doubts about how to understand mixed attributes in dynamic style language less grammar. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to understand mixed attributes in dynamic style language less grammar". Next, please follow the editor to study!

Mix:

In LESS, we can define some common property sets as a selector, and then call these properties in another selector. For example:

The code is as follows:

.a, # b {

Color: red

}

. mixin-class {

.a ()

}

. mixin-id {

# b ()

}

After compilation

The code is as follows:

.a, # b {

Color: red

}

. mixin-class {

Color: red

}

. mixin-id {

Color: red

}

Note: when calling mixing, you can add parentheses or no parentheses. The following is also true:

The code is as follows:

.a, # b {

Color: red

}

. mixin-class {

.a

}

. mixin-id {

# b

}

If you only want to define a mix, you can add parentheses after the selector, as follows:

The code is as follows:

. my-mixin {

Color: black

}

.my-other-mixin () {

Background: white

}

.class {

. my-mixin

.my-other-mixin

}

After compilation, the parenthesized .my-other-mixin () will not be compiled.

The code is as follows:

. my-mixin {

Color: black

}

.class {

Color: black

Background: white

}

Any CSS class, id, or set of element attributes can be introduced in the same way. Selectors can be nested in a universal selector.

Namespace:

If you want to mix properties in a more complex selector, you can stack multiple id or classes. As follows:

The code is as follows:

# outer {

.inner {

Color: red

}

}

If you want to use this mixed property, you can do this, and the following four are equivalent

The code is as follows:

.c {

# outer > .inner

}

.c {

# outer > .inner ()

}

.c {

# outer.inner

}

.c {

# outer.inner ()

}

You can define blending attributes under an id to avoid conflicts with other blends.

Keywords! important:

Add the! important keyword after the use of mixed attributes, and the keyword! important is added to all properties in the mix. For example:

The code is as follows:

.foo (@ bg: # f5f5f5, @ color: # 900) {

Background: @ bg

Color: @ color

}

.unimportant {

.foo (1)

}

.important {

.foo (2)! important

}

After compilation

The code is as follows:

.unimportant {

Background: # f5f5f5

Color: # 900

}

.important {

Background: # f5f5f5! important

Color: # 900! important

}

Blending with parameters:

Mixed attributes can also be passed in parentheses, as follows:

The code is as follows:

.border-radius (@ radius) {

-webkit-border-radius: @ radius

-moz-border-radius: @ radius

Border-radius: @ radius

}

We just need to pass a parameter when using it, as follows:

The code is as follows:

# header {

.border-radius (4px)

}

.button {

.border-radius (6px)

}

Of course, we can also give the parameter a default value, so that it can be used to pass a value or not. As follows:

The code is as follows:

.border-radius (@ radius: 5px) {

-webkit-border-radius: @ radius

-moz-border-radius: @ radius

Border-radius: @ radius

}

If we do not pass a value, the default value of 5px will be used.

Of course, we can also pass multiple parameters, as follows:

The code is as follows:

.mixin (@ color) {

Color-1: @ color

}

.mixin (@ color; @ padding:2) {

Color-2: @ color

Padding-2: @ padding

}

.mixin (@ color; @ padding; @ margin: 2) {

Color-3: @ color

Padding-3: @ padding

Margin: @ margin @ margin

}

.some .selector div {

.mixin (# 008000)

}

After compilation

The code is as follows:

.some .selector div {

Color-1: # 008000

Color-2: # 008000

Padding-2: 2

}

As can be seen from the results of the compilation, less also has the feature of function overloading. When we define the same mixed attribute name, the parameters are different, and then .mixin (# 008000); called, both the first and second mixtures match, but the third lacks the value of the parameter @ padding, so the third mixed attribute is not referenced.

We can not only pass multiple values, but also specify the attribute name to pass the value, as follows:

The code is as follows:

.mixin (@ color: black; @ margin: 10px; @ padding: 20px) {

Color: @ color

Margin: @ margin

Padding: @ padding

}

.class1 {

.mixin (@ margin: 20px; @ color: # 33acfe)

}

.class2 {

.mixin (# efca44; @ padding: 40px)

}

Keyword @ arguments:

@ arguments has a special meaning, similar to js's arguments, which contains all the parameters passed to the mixed attribute, as follows:

The code is as follows:

.box-shadow (@ x: 0; @ y: 0; @ blur: 1px; @ color: # 000) {

-webkit-box-shadow: @ arguments

-moz-box-shadow: @ arguments

Box-shadow: @ arguments

}

. big-block {

.box-shadow (2px; 5px)

}

After compilation

The code is as follows:

. big-block {

-webkit-box-shadow: 2px 5px 1px # 000

-moz-box-shadow: 2px 5px 1px # 000

Box-shadow: 2px 5px 1px # 000

}

Keyword @ reset:

Unlike @ arguments, @ reset contains parameters other than the specified parameters, such as:

The code is as follows:

.mixin (@ a; @ rest...) {

/ / @ rest contains the parameters after @ a

/ / @ arguments contains all the parameters

}

Pattern matching:

Sometimes you want the mix to do different things according to the parameters you pass in, such as:

The code is as follows:

.mixin (dark; @ color) {

Color: darken (@ color, 10%)

}

.mixin (light; @ color) {

Color: lighten (@ color, 10%)

}

.mixin (@ _; @ color) {

Display: block

}

.class {

.mixin (@ switch; # 888)

}

For .class you assign different values to the variable @ switch, different mixed attributes are called, such as

@ switch: light

After compilation

The code is as follows:

.class {

Color: # a2a2a2

Display: block

}

Use Mixin as a function:

When we use mixing as a function, the variables in the function can be used after the function is called, unless the element that calls the mixed attribute defines the same variable itself. For example:

The code is as follows:

.mixin () {

@ width: 100%

@ height: 200px

}

.caller {

.mixin ()

Width: @ width

Height: @ height

}

After compilation

The code is as follows:

.caller {

Width: 100%

Height: 200px

}

Use expressions:

The code is as follows:

.average (@ x, @ y) {

@ average: (@ x + @ y) / 2)

}

Div {

.average (16px, 50px); / / "call" the mixin

Padding: @ average; / / use its "return" value

}

After compilation

The code is as follows:

Div {

Padding: 33px

}

LESS VS SASS

At this point, the study on "how to understand mixed attributes in dynamic style language less syntax" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.