What can less do? Less detailed! (less nested selectors implement pure CSS level two Navigation)

Front-End technology is numerous, as a front-end engineer, every contact with new technologies we must first understand the advantages and disadvantages of this technology, this is the most basic. In-depth said also need to understand the technical application scenarios, with the technology, etc., convenient for future architecture Preparation. and less as a CSS preprocessing language, has the function of the characteristics of the change, the main advantage is Efficient. It is mainly used for large items with many CSS . Main body now: the definition of project public style, such as page main color, fixed value (width, height, time, etc.), common style template, encapsulating function omitting browser compatible prefix, etc.

Two ways to use 1.less

1.1 Direct calls need to introduce less.js, and less style files, It should be noted that the REL needs to be specified as Stylesheet\less. This is also called after the inside of the browser eventually converts the style in less to a CSS Style. This method is not recommended because there are many resource requests when the page loads.

<link rel= "stylesheet/less" href= "./lesstest.less"/><script src= "./less.js" ></script>

1.2 The less file is compiled into a CSS file after the introduction, Bo master is using the Koala tool, we can self-baidu.

Less syntax (this article is intended to facilitate direct use of the introduction of the lesstest.less file, the actual development of the proposed use of the second METHOD)

2. Define variable @ variable name: variable value;

///define color Variable @pe_color: #204d90;. Div1{  width: 100px;   Height: 100px;   background: @pe_color;}

//define string variable @baseurl: "./img/";. Div1{  width: 1000px;   Height: 1000px;   background-image: url ("@{baseurl}/bannernba.jpg");}

Variable calculation

* Numerical calculation

@width: 1000px;. Div1{  width: @width;   Height: @width/2;   margin-top: @width *pi ();     //pi () is the less function, see API  border for details: 1px solid #000;}

* Color Calculation

@baseColor: #6dffa7; @bdColor: spin (@baseColor, 180);. Div1{  width: 1000px;   Height: 1000px;   Border: 10px solid @bdColor;             //palette Color value rotation 180 degrees, that is, the center of Symmetry Point  background: darken (@baseColor, 50%);      Dim 50%  Color:lighten (@baseColor, 40%)       //lighten 40%}

3. Mixin Hybrid Template

. Myborder (@bdwidth, @bdstyle, @bdcolor) {  border: @bdwidth @bdstyle @bdcolor;} . Div1 {  width: 1000px;   height: 1000px;   . myborder (5px,dashed, #666666)}

* Define default values

 .myborder (@bdwidth: 10px, @bdstyle: solid, @bdcolor: #86ffff)  { border :  @bdwidth @bdstyle @bdcolor ;} .div1  {:  1000px ; :  1000px ; } 

. Myborder (@bdwidth: 10px, @bdstyle: solid, @bdcolor: #86ffff) {  border: @bdwidth @bdstyle @bdcolor;} . Div1 {  width: 1000px;   height: 1000px;   . myborder (20px)}

* Selective invocation

/*Write compatible templates*/. Mytransition (){-webkit-transition:all 1s linear;-moz-transition:all 1s linear;-ms-transition:all 1s linear;-o-transition:all 1s linear;transition:all 1s linear;}/*Template A-1*/. Mylinearbackground (style1, @color1, @color2){Background-image:-webkit-linear-gradient (top, @color1, @color2);Background-image:-moz-linear-gradient (top, @color1, @color2);Background-image:-ms-linear-gradient (top, @color1, @color2);Background-image:-o-linear-gradient (top, @color1, @color2);Opacity:. 3;}/*Template A-2*/. Mylinearbackground (style2, @color1, @color2){Background-image:-webkit-linear-gradient (bottom, @color1, @color2);Background-image:-moz-linear-gradient (bottom, @color1, @color2);Background-image:-ms-linear-gradient (bottom, @color1, @color2);Background-image:-o-linear-gradient (bottom, @color1, @color2);Opacity:. 7;}. Mylinearbackground (@_,@_,@_){The number of//@_ is the same as the number of two style template Parameters. mytransition (); @_ is a wildcard character, this template means that whenever A. mylinearbackground () is called, the inner style is called whenever}. Div1{width:1000px;Height:1000px;. Mylinearbackground (style1, #86ffff, #ff3e54);}. Div1:hover{. Mylinearbackground (style2, #ff3e54, #86ffff)}

3. Nested selectors

Complete a pure CSS navigation with a nested selector:

The DOM structure is as Follows:

    <ulclass= "box">        <Li>Menu 1</Li>        <Li>Menu 2<ul>                <Li>Sub-menu 1</Li>                <Li>Sub-menu 2</Li>                <Li>Sub-menu 3</Li>                <Li>Sub-menu 4</Li>            </ul>        </Li>        <Li>Menu 3</Li>        <Li>Menu 4</Li>    </ul>

The CSS is as follows:

@bgcolor: #86ffff; @bdcolor: #ffe91e; @itemwidth: 100px; @itemheight: 50px;. Itemborder (@bdwidth: 2px, @bdstyle: solid, @bdcolor: @bdcolor){Border:@bdwidth @bdstyle @bdcolor;}*{margin:0;padding:0;}. Box{width:420px;Height:50px;List-style:None;li{//equivalent to ul li width:@itemwidth;Height:@itemheight;List-style:None;Line-height:50px;text-align:Center;background:@bgcolor;. Itemborder (); &:Hover{//equivalent to ul li:hover itemborder (2px,solid, #ff3516)}} >li{//equivalent to Ul>li overflow:Hidden;float: left;&:hover{//equivalent to Ul>li:hover overflow:visible;cursor:Pointer; }  }}

What can less do? Less detailed! (less nested selectors implement pure CSS level two Navigation)