CSS pre-compilation language-less

The role of Less

CSS cascading style sheet, which is a markup language, not a programming language; All precompiled CSS languages (Less/sass ... is an object-oriented idea that has been given CSS

Compilation of Less

Less is called precompiled CSS: a well-written less code browser cannot be rendered, and we need to compile it into a CSS that can be rendered.

开发环境

In local development This is the development environment
生产环境
Local development is done, we need to upload the code to the server, the environment on the server is called the production environment

In the development environment, we generally compile less code at any time by importing the less plugin (less-2.5.3.min.js)

<!--the value of rel becomes stylesheet/less -<Linlrel= ' stylesheet/less 'href= ' css/1.less '><Scriptsrc= ' Js/less-2.5.3.min.js '></Script> <!--Because every time the page is loaded, you need to import the less.js, and the less file is recompiled to CSS (it consumes performance, the page will be open slowly),
So the real project, only in the development environment we use this model, production environment, we definitely need to pre-write less than compiled into normal CSS,
On-line, after the user access is compiled CSS, and not to take less now compiled -

In a production environment, we need to compile less as a CSS in advance:
1. Compile with node

1. Download and install node2. Install a less module using the NPM Package Manager in the node Global environment

　　　　NPM Install less-g installation command line

3. Execute in the executed directory

　　　　LESSC xxx. less xxx. css to compile less as CSS

　　　　LESSC xxx. less xxx. Min. css-x not only compiles CSS, but also compresses the CSS

2. Using the Compile tool

Basic syntax in less

变量

/* * Set variables using @[variable name]: variable value (traditional CSS supported values can be used as variable values) * 1, variable name can be out of-* in the partial subtraction mathematical operation, we need to be explicitly operator or the name of the-* (@shadow-px) -20* 2, Not all cases use variables, only: Many styles use the same value, and if you change it later, the style of all the elements will be changed, and then we will store them with variables * * Less can support mathematical operations */ @a:1;@b : 30%;@c:1000px;@d: #000; @shadow-px:100;. Box{opacity:@a;  Filter: Alpha (opacity= (@a*100));}

函数封装

/** In less, as long as a style class is set, we can call it a method, other places need to use these styles, direct ". [Class name] "Call (principle: Copy the code in the current style class in the past) * without parentheses is a Normal style class, is also a function of encapsulation, when compiling, the code in this style class is still compiled * parentheses are only encapsulated functions, compile time is not compiled function of the * * function *. XXX (@xxx: xxx, @xxx) {@arguments}*/ /*1.*/. pub (){width:100px;Height:100px;background:Green;}. Box{. pub (); background:Red;}/*2.*/. Transition (@property: All, @duration, @timing: linear, @delay: 0s){transition:@arguments;/*transition: @property @duration @timing @delay;*/}. Box{. Transition (all,1s,linear,0s); Transition (@timing:ease, @duration: 1s);}/*3.*/. SUM (@n,@m;0){@result:@[email protected];}. Box{. sum (10,20); width:unit (@result, px);/*Unit is the method provided by less * unit ([value], ' px ') to set units for value values (but if there have been units before, here is the original unit removed)*/}

命名空间和作用域

@a:10;. Box{width:unit (@a,px);  @a:; . mark{//=> equivalent to. box. mark{}width:unit (@a,px);}} Result:. box{width:20px;} . Box Mark {width: 20px;} /* There is also a variable promotion in less, and less has completed the declaration and definition in the private scope beforehand. */

Extend inheritance in less

. Pub{width:100px;Height:100px;background:Red;}/** Extend inheritance in less is not a copy code, but rather a common set of styles for the current style class and inherited style classes (how to compile into a group selector)*/. Box:extend (. pub){background:Green;}//or. Box{&:extend (. pub);//=> principle is the same, but also put it at the end of the. Box Background:Green;}//results. Box.pub{width:100px;Height:100px;background:Red;}/*in real-world projects, if you want to use extend to implement inheritance, we must write the style class that needs to inherit in the outermost layer (not the inner private scope), if you want to inherit a style class from the current private scope, you need to have the prefix ready.*/

Conditions and recursion in less

条件

Commonly used conditional operators:>, >=, <, <=, =;&NBSP;
Set conditions can also use the IS function: Span class= "Apple-converted-space" >&NBSP;
IsColor, Isnumber, isstring, Iskeyword, Isurl, Ispixel, ispercentage ...

. Pub (@x) when (@x<=10) {width: 100px; height: 200px;} . Pub (@x) when (@x>10) {width: 200px; height: 400px;} . Box {. pub; background: green;} //Result:. Box {width: 200px; height: 400px; background: green;}

Recursive

. Columns (@i) when (@i<=4) {[email protected]{i} {width:unit (@i*10,%);} . Columns (@i+1);}. Columns (1);//results:. box1{width:10%;} . Box2 {width:20%;} . Box3 {width:30%;} . Box4 {width:40%;}

The connector and import in less

{ . mark {//=>. box. Mark }{ //=>.box.pp background: Red;　　}{ background: Green;　　}{ background: Orange; }}

A quick way to get your web front-end development-less Learning: Understanding less and compiling less

Http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-22/527.html

Improve the effect of Web front-end development by learning less basic grammar

Http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-22/528.html

CSS pre-compilation language-less