less syntax (2) mixed attributes_html/css_WEB-ITnose

Summary:

We introduced the variables and extend syntax of less before. Today we are studying the mixed attributes (Mixin). Mixing can be said to be another feature of less. You can define common properties together and then call this mixing property directly when using it.

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

.a, #b {  color: red;}.mixin-class {  .a();}.mixin-id {  #b();}

After compilation

.a, #b {  color: red;}.mixin-class {  color: red;}.mixin-id {  color: red;}

Note: When calling mix, you can add parentheses or not. The following one is also correct:

.a, #b {  color: red;}.mixin-class {  .a;}.mixin-id {  #b;}

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

.my-mixin {  color: black;}.my-other-mixin() {  background: white;}.class {  .my-mixin;  .my-other-mixin;}

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

.my-mixin {  color: black;}.class {  color: black;  background: white;}

Any CSS class, id or element attribute set can be introduced in the same way. Selectors can be nested within universal selectors.

Namespace:

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

#outer {  .inner {    color: red;  }}

If you want to use this mixed attribute, you can do this. The following four are equivalent

.c{    #outer > .inner;}.c{    #outer > .inner();}.c{    #outer.inner;}.c{    #outer.inner();}

You can define the mix properties under an id to avoid conflicts with other mixes.

Keyword !important:

If you add the !important keyword after using a mixed attribute, all attributes in the mix will be added with the keyword !important. For example:

.foo (@bg: #f5f5f5, @color: #900) {  background: @bg;  color: @color;}.unimportant {  .foo(1);}.important {  .foo(2) !important;}

Compiled

.unimportant {  background: #f5f5f5;  color: #900;}.important {  background: #f5f5f5 !important;  color: #900 !important;}

Mixed properties can also pass parameters through parentheses, as follows:

.border-radius(@radius) {  -webkit-border-radius: @radius;     -moz-border-radius: @radius;          border-radius: @radius;}

We only need to pass one parameter when using it, as follows:

#header {  .border-radius(4px);}.button {  .border-radius(6px);}

Of course, we can also give the parameter a default value, so that we can pass a value or not when using it. 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:

.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 @margin @margin;}.some .selector div {  .mixin(#008000);}

After compilation

.some .selector div {  color-1: #008000;  color-2: #008000;  padding-2: 2;}

From the compilation results, we can see that less also has the feature of function overloading. When we define the same mix attribute name with different parameters, and then call .mixin(#008000);, both the first and second mixes will match, but the third one lacks the value of the parameter @padding, so the third mix will not be referenced. property.

We can not only pass multiple values, but also specify attribute names to pass values, 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 arguments in js. It contains all parameters passed to mixed properties, 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

.big-block {  -webkit-box-shadow: 2px 5px 1px #000;     -moz-box-shadow: 2px 5px 1px #000;          box-shadow: 2px 5px 1px #000;}

Keyword @reset:

Different from @arguments, @reset contains parameters other than those specified External parameters, for example:

.mixin(@a; @rest...) {   // @rest包含了@a之后的参数   // @arguments包含了所有参数}

Pattern matching:

Sometimes you want the mix to be different based on the parameters you pass in Things, such as:

.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, and different mixed properties will be called, such as

@switch: light;

Compiled

.class {  color: #a2a2a2;  display: block;}

When we put When a mixin is used as a function, the variables in the function are available after the function is called, unless the element calling the mixin attribute defines the same variable itself. For example:

.mixin() {  @width:  100%;  @height: 200px;}.caller {  .mixin();  width:  @width;  height: @height;}

After compilation,

.caller {  width:  100%;  height: 200px;}

Use the expression:

.average(@x, @y) {  @average: ((@x + @y) / 2);}div {  .average(16px, 50px); // "call" the mixin  padding: @average;    // use its "return" value}

After compilation

div {  padding: 33px;}