Less programming CSS Learning

Some time ago, I took the time to learn less, a dynamic style language, and felt really powerful.

How to use it on the client:

1. Introduce your style file and set the rel attribute to stylesheet/less.

2. Introduce the less. js file you downloaded in the head.

Note: 1. The style file must be earlier than the less. js file. 2. It must be used in the server environment.

Usage:

1. Usage of variables.

Variables allow us to define a series of general styles separately and then call them when needed.

 
@ The-border: 2px solid # CCC;. de{Border:@ The-border;}
 

2. function method.

We can pass a parameter to it and call it like using a function.

. Box-shadow (@ shadow){Box-shadow:@ Shadow;}. De{Width:Pixel PX;Height:Pixel PX;. Box-shadow (#936 0 0 10px );}
 

3. nested mode.

We can nest another selector in one selector to implement inheritance.

 
. De{P {color:#936;}}
 

4. Functions and calculation methods.

ProgramAddition, subtraction, multiplication, division.

  @ the-border: 1px; @ The-color: #111 ;. de  { color : @the-color * 3 ;}