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

This article mainly introduces the CSS dynamic style language less grammar mixed attributes how to use, the article is very detailed, has a certain reference value, interested friends must read it!

Mix:

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

Copy the code

The code is as follows:

.a, # b {

Color: red

}

. mixin-class {

.a ()

}

. mixin-id {

# b ()

}

After compilation

Copy the code

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:

Copy the code

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:

Copy the code

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.

Copy the code

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:

Copy the code

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

Copy the code

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:

Copy the code

The code is as follows:

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

Background: @ bg

Color: @ color

}

.unimportant {

.foo (1)

}

.important {

.foo (2)! important

}

After compilation

Copy the code

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:

Copy the code

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:

Copy the code

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:

Copy the code

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:

Copy the code

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

Copy the code

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:

Copy the code

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:

Copy the code

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

Copy the code

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:

Copy the code

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:

Copy the code

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

Copy the code

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:

Copy the code

The code is as follows:

.mixin () {

@ width: 100%

@ height: 200px

}

.caller {

.mixin ()

Width: @ width

Height: @ height

}

After compilation

Copy the code

The code is as follows:

.caller {

Width: 100%

Height: 200px

}

Use expressions:

Copy the code

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

Copy the code

The code is as follows:

Div {

Padding: 33px

}

LESS VS SASS

Similar framework also has SASS: http://sass-lang.com/, and LESS, both belong to the CSS preprocessor, the function is more or less the same, both use a similar programming language to write CSS, with variables, mixing, nesting, inheritance and other characteristics, the ultimate goal is to facilitate CSS writing and maintenance.

The above is all the content of this article entitled "how to use less Syntax mixed attributes in CSS dynamic style language". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.