[CSS] dynamic CSS-less

ArticleDirectory

• 1. Variables
• 2. Hybrid
• 3. Mixed Parameters
• 4. nested rules

Less is a style language that provides CSS with dynamic language features, such as variables, inheritance, operations, and functions. Less can be run on the client (ie 6 +, WebKit, and Firefox are supported), or node. js or rhino can be run on the server.

As a form of CSS extension, less does not caster the CSS function. Instead, it adds many additional functions in the existing CSS syntax. Therefore, for front-end developers, learning less is a breeze. Let's take a look at a piece of CSS written with less:

  @ base: # f938ab ;. box-shadow (@ style, @ C) When (iscolor (@ C)  { box-shadow :  @ style @ C ; -WebKit-box-shadow :  @ style @ C ; -moz-box-shadow : @style @ C ;}< span style =" color: #800000; ">. box-shadow (@ style, @ ALPHA: 50%) When (isnumber (@ alpha)  {. box-shadow (@ style, rgba (0, 0, 0, @ alpha); }< span style = "color: #800000;">. box  { color :  saturate (@ base, 5%) ;  border-color :  lighten (@ base, 30%) ;  Div {. box-shadow (0 0 5px, 30%) }< span style = "color: #800000;" >} 

Without learning less, we don't know this.CodeWhat is it for? How to generate the CSS code we are familiar with? After the above Code is compiled less:

 
. Box{Color:# Fe33ac;Border-color:# Fdcdea;}. Box Div{Box-shadow:0 0 5px rgba (0, 0, 0, 0.3);-WebKit-box-shadow:0 0 5px rgba (0, 0, 0, 0.3);-Moz-box-shadow:0 0 5px rgba (0, 0, 0, 0.3);}
 

Next, let's learn less.

We know that if you want to use jquery, you must introduce the jquery library on the page. Similarly, when using less to write CSS code, you must also introduce the less library-less. js. ClickHereDownload the less library.

After the download, you only need to introduce it to the page.

    link   rel  =" stylesheet/less "  type  =" text/CSS "  href   =" style. less "  media  =" all " />     script   type   =" text/JavaScript "  SRC   =" less. JS " >
     script  > 

Note that the external style import method has changed,RELThe attribute value is stylesheet/less, and the style suffix is changed to. Less. At the same time, the less style file must be introduced before less. js.

After the introduction of less, we started to learn less.

Less Syntax 1. Variables

Less variables allow you to define commonly used attribute values in the style and apply them to the style so that you can change the global effect by changing the value of the variable. It is a bit similar to global variables in JavaScript.

You can even define a variable as a variable.

 
@ Color: red; @ foot: 'color';. Head{Color:@ Color;}. Foot{Color:@ Foot;}
 

Output:

 
. Head{Color:Red;}. Foot{Color:Red;}
 

Note that the variables in less are completely "constants", so they can only be defined once.

2. Hybrid

A Hybrid Operation defines a class and calls this class in other classes.

 
. Common{Color:Red;}. Nav{Background:# Ccc;. Common;}
 

Output:

 
. Common{Color:Red;}. Nav{Background:# Ccc;Color:Red;}
 

Class, ID, or element attribute set in CSS can be introduced in the same way.

3. Mixed Parameters

In less, you can regard the class as a function, and the function can contain parameters.

 
. Border-radius (@ radius){Border-radius:@ Radius;-Moz-border-radius:@ Radius;-WebKit-border-radius:@ Radius;}# Header{. Border-radius (4px );}. Button{. Border-radius (6px );}
 

Final output:

# Header{Border-radius:4px;-Moz-border-radius:4px;-WebKit-border-radius:4px;}. Button{Border-radius:6px;-Moz-border-radius:6px;-WebKit-border-radius:6px;}
 

We can also set the default value for the parameter:

. Border-radius (@ radius: 5px){Border-radius:@ Radius;-Moz-border-radius:@ Radius;-WebKit-border-radius:@ Radius;}# Header{. Border-radius;}
 

Final output:

 
# Header{Border-radius:5px;-Moz-border-radius:5px;-WebKit-border-radius:5px;}
 

You can also define a set of attributes without parameters. If you want to hide this set of attributes, do not expose it to CSS, but want to reference it in other property sets, this method is very useful:

. Wrap (){Text-wrap:Wrap;White-space:Pre-wrap;White-space:-Moz-Pre-wrap;Word-wrap:Break-word;}Pre{. Wrap}
 

Output:

Pre{Text-wrap:Wrap;White-space:Pre-wrap;White-space:-Moz-Pre-wrap;Word-wrap:Break-word;}
 

There is also an important variable @ arguments.

@ Arguments contains all passed parameters. This is useful when you do not want to process individual parameters.

 
. Border (@ width: 0, @ style: solid, @ color: Red){Border:@ Arguments;}. Demo{. Border (2px );}
 

Output:

. Demo{Border:2px solid # ff0000;}
 

There are also many advanced applications such as pattern matching. I will not introduce it here. I will only talk about some basic things.

4. nested rules

Less allows us to write CSS in nested mode. The following is the CSS we usually write:

# Header H1{Font-size:26px;Font-weight:Bold;}# Header P{Font-size:12px;}# Header P{Text-Decoration:None;}# Header p a: hover{Border-Width:1px;}
 

With less, we can write like this:

# Header{H1 {font-size:26px;Font-weight:Bold;}P{Font-size:12px;A {text-Decoration:None;&:Hover {border-width: 1px}}}}
 

Note & Symbol usage-if you want to write a series selector instead of a descendant selector, you can use. This is especially useful for pseudo classes such as hover.


5. Operation

Any number, color, or variable can be involved in the operation.

. Demo{Color:#888/4;}
 

Output:

 
. Demo{Color:#222222;}
 

Less can perform complex arithmetic operations, and the same compound operation is no problem.

6. Color Functions

Less provides a series of color operations. The color is first converted to the HSL color space and then operated at the channel level.

Lighten (@ color, 10% ); //  Return a color which is 10% * lighter * than @ color Darken (@ color, 10% ); //  Return a color which is 10% * darker * than @ color  Saturate (@ color, 10% );//  Return a color 10% * more * saturated than @ color Desaturate (color, 10% ); //  Return a color 10% * Less * saturated than @ color  Fadein (@ color, 10% ); //  Return a color 10% * Less * transparent than @ color Fadeout (@ color, 10% ); //  Return a color 10% * more * transparent than @ color Fade (color, 50% ); //  Return @ color with 50% transparency Spin (@ color, 10 ); //  Return a color with a 10 degree larger in Hue than @ color Spin (@ color,-10 ); //  Return a color with a 10 degree smaller hue than @ color  Mix (@ color1, @ color2 );  //  Return a mix of @ color1 and @ color2 

It is quite simple to use:

@ Base: # f04615;. Class{Color:Saturate (@ base, 5%);Background-color:Lighten (spin (@ base, 8), 25%);}
 

You can also extract color information:

 
Hue (@ color );//Returns the 'hue 'Channel of @ colorSaturation (@ color );//Returns the 'saturation' channel of @ colorLightness (@ color );//Returns the 'lightness 'Channel of @ color
 

For example:

@ Color: # f36; # Header{Background-color:HSL (hue (@ color), 45%, 90%);}
 

Output:

 
# Header{Background-color:# F1dae0;}
 

7. Math Functions

Less provides a set of convenient mathematical functions that you can use to process numeric values.

 
Round (1.67 );//Returns 2Ceil (2.4 );//Returns 3Floor (2.6 );//Returns 2
 

If you want to convert a value to a percentage, you can usePercentageFunction:

Percentage (0.5 );//Returns 50%
 

8. namespace

Sometimes, you may package some variables or mixed modules to better organize CSS or simply to better encapsulate them. You can# FormSome attribute sets can be reused after being defined in:

 
# Form{. Submit () {display:Block;Border:1px solid black;Background:Gray;&:Hover {Background: Green}}. Register{...}. Login{...}}
 

You only need to introduce. Submit in # myform as follows:

 
# Myform{Color:Orange;# Form>. Submit;}
 

9. Scope

And othersProgramming LanguageSimilarly, less variables also have scopes. First, the local variables or hybrid modules will be searched. If not found, the variables will be searched in the parent scope until they are found.

 
@ Var: red; # page{@ VaR:White;# Header {color:@ VaR;// White}} # Footer{Color:@ VaR;// Red}
 

10. Annotations

CSS comments are retained in less, and less also supports comments with double slashes, but are automatically filtered out when compiled into CSS.

 

In the end, there are some other features of less. You can goLess official websiteCheck it out.