Less language features (translation)

First, Mixin

Mixins is a-including ("mixing in") a bunch of the properties from one rule-set into another rule-set.

Mixins is a method that adds (a set of style rules) to (another set of style rules).

{  border-top: dotted 1px black;   border-bottom: solid 2px black;}  {  color: #111;  . bordered;}  {  color: red;  . bordered;}

View Code

Notice that is mixin, the parentheses is optional.

When you use a mixin, (parentheses) are optional.

If you want to the create a mixin but you don't want that mixin to is output, you can put the parentheses after it.

You create a mixin but do not want this mixin output, then add () after the mixin at the time of creation.

{  color: black;}  {  background: White;}  {  . my-mixin;  . my-other-mixin;}

View Code

Mixins can contain more than just properties, they can contain selectors too.

Mixins can include not only styles, but also nesting (selectors).

{  &:hover {    border:1px solid red;  }  {  . my-hover-mixin;}

View Code

If you want to mixin properties inside a more complicated selector, you can stack up multiple ID ' s or classes.

If you want to use a property in a mixin that has a complex selector nested, you can navigate directly to the location using either the ID or the class.

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

View Code

One use of this is known as namespacing. You can put your mixins under a ID selector and this makes sure it won ' t conflict with another library.

The outermost use of mixin with ID nesting can form a new namespace to prevent style collisions with other style libraries.

{  . My-mixin () {    color: black;  }  {  #my-library > my-mixin;}

View Code

If namespace has a guard, mixins defined by it is used only if guard condition returns true.

If the Mixin has a guard (conditions of use), follow the guard rule and compile only if Gurd is true.

{  /**/ }}

View Code

If you want to match mixins based on value type, you can use the is functions:

Here's the basic type checking functions:iscolorisnumberisstringiskeywordisurlif you want to check if a value was in a SP Ecific unit In addition to being a number, the use one Of:ispixelispercentageisemisunit

View Code

{}{}

View Code

Use the !important keyword after mixin call to mark all properties inherited by it as !important :

When Mixin is used !important , all styles in the mixin inherit !important .

{  background: @bg;   color: @color;}  {  . foo ();}  {  . foo ()!important;}

View Code

Mixins can also take arguments, which was variables passed to the block of selectors when it was mixed in.

Like adding arguments to a method, mixin can also add arguments passed to the Mixin attribute for internal use.

Parametric mixins can also has default values for their parameters or multiple parameters.

You can also set a default value, or reassign it to override the default value when you use it. Wait, (-_-).

{  -webkit-border-radius: @radius;      -moz-border-radius: @radius;           Border-radius: @radius;}  {  -webkit-border-radius: @radius;      -moz-border-radius: @radius;           Border-radius: @radius;}

View Code

@argumentsHave a special meaning inside mixins, it contains all the arguments passed when the mixin was called. This was useful if you don ' t want to deal with individual parameters:

@arguments is a keyword in mixin that contains all the properties that have been set in the mixin.

{  -webkit-box-shadow: @arguments;      -moz-box-shadow: @arguments;           box-shadow: @arguments;}  {  . Box-shadow (2px; 5px);}

View Code

You can use the ... if you want your mixin to take a variable number of arguments.

You can use ... To indicate that there are multiple variables. Keyword @rest and JavaScript have similar rest meanings, representing all variables except the previously declared variables.

{        //Matches 0-n arguments.mixin () {           //matches exactly 0 arguments.mixin (@a: 1) {      //matches 0-1 Arguments.mixin (@a:1;  ...) {//Matches 0-n arguments.mixin (@a; ...) {    //matches 1-n arguments.mixin (@a; @rest ...) {   //@rest are bound to arguments after @a   //@arguments are boundto all arguments}

Sometimes, want to change the behavior of a mixin, and based on the parameters your pass to it. Let's start with something basic:

Sometimes you want to change the function of mixin by parameters, you can:

{  color: darken (@color, 10%);}  {  color: lighten (@color, 10%);}  {  display: block;}  {  . mixin (@switch; #888);}  {  color: #a2a2a2;   Display: block;}

View Code

only mixin definitions which matched were used. Variables match and bind to any value. Anything other than a variable matches only with a value equal to itself.

When used, only those corresponding to the variables defined in Mixin will be applied.

. 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);}output:.some. Selector Div{color-1:#008000;color-2:#008000;padding-2:2;}

View Code

Variables and Mixins defined in a mixin is visible and can be used in caller ' s scope. Thus variables defined in a mixin can act as its return values.

The scope of the variable defined in Mixin: The scope of the caller. You can also create new methods with variables to return new values.

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

View Code

{  @average: ((@x + @y)/2);}  {  . Average (16px, 50px);//"Call" the mixin  padding: @average;     Use of its "return" value}

View Code

Variables defined directly in callers scope cannot is overridden. However, variables defined in callers parent scopes is not protected and would be overridden.

A global variable that is defined directly outside of mixin will be overridden by a local variable defined within the Mixin, similar to the scope of the JavaScript variable. But variables that are defined inside caller are ignored.

{  //would use global variable, because it's accessible  //from Detached-ruleset definition  variable : @variable; }{  @detached-ruleset ();  @variable: value; //variable defined in Caller-will is ignored}

View Code

Mixin defined in Mixin acts as return value too:

{ //outer mixin  . DoSomething () {//nested mixin    declaration: @value;  }  {  . Unlock (5);//Return. DoSomething ()  . dosomething ();//use. dosomething ()}

View Code

A detached ruleset is a group of CSS properties, nested rulesets, media declarations or anything else stored in a variable . You can include it in a ruleset or another structure and all its properties is going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.

RuleSet is a collection of styles, selectors nested, media declarations, etc. stored in variables. You can use this set directly or use it as a variable in mixin. This must be added () at the time of use

{    . my-selector {      @media TV {        background-color: black;      }     }  {    @my-ruleset ();}  {  . my-selector {    background-color: black;  } }

View Code

Variable scope This is a very complicated aspect ...

The indefinite content is not written up.

Second, Merge

The merge feature allows for aggregating values from multiple properties into a comma or space separated list under a sing Le property. is merge useful for properties such as background and transform.

The merge feature allows multiple attributes to be written under a single property, either as a comma or as a space. such as background and transform composite properties.

{  box-shadow+: inset 0 0 10px #555;}  {  . mixin ();  box-shadow+: 0 0 20px black;}

View Code

{  transform+_: Scale (2);}  {  . mixin ();  Transform+_: rotate (15deg);}

View Code

Less language features (translation)