Automate efficient CSS development and talk less about flexible changes

CSS is a kind of HTML and style to separate parsing and the appearance of code, it has greatly improved the programmer's efficiency, and later maintenance efficiency. However, since the development of rigid and monotonous writing, more and more can not meet the programmer's flexible thinking, many times is a kind of disciplining mood to write CSS, so, some clever programmers invented less.

Less is to simplify the development of CSS, flexible CSS development, the function is very powerful, flexibility is very high, and very fast, so more and more favored by the front-end development, the basic grammar I do not speak, I believe that niang on the countless tutorials can be seen, I would like to take advantage of less flexible features to do something.

　　1 less to resolve CSS3 compatibility prefixes

1 . Box-shadow (@shadow) {2-webkit-box-shadow:@shadow; 3 -moz-box-shadow:@shadow; 4 -o-box-shadow:@shadow; 5 Box-shadow:@shadow; 6 } #box {. Box-shadow (2px 2px 3px #ccc);} Call

And so on, the boss no longer have to worry about my CSS3 cross-browser compatibility;

　　2 encapsulating less functionality in a code block way

1 . List (@show: 4, @width: 100%, @line: 10px){2 width:@width;Overflow:Hidden;3 ul{4 . CF; Margin-right:[email protected];Background-color:Red5}6 Li{7 float: Left;width:(@width-(@show-1) * @line)/@show;Margin-right:@line;Margin-bottom:@line;8 img{max-width:100%; }9     }Ten }
#xx_list {. List (4, 1030px, 10px);} Called, the parameter is: one line shows 4, total width, line spacing

Directly to the item list, (. CF for clear floating less, the specific code is as follows:)

1 . CF (){2 Min-height:1px;Zoom:1;3 &:after{content: "";Display:Block;Height:0;Clear:both;Visibility:Hidden}4 }

　　3 less write custom color gradient buttons and button pseudo-classes

1 . Q-grad (@bgcolor: Red, @origin: Left, @alpha: 0.2){2 Background-color:@bgcolor;3 Background-image:-webkit-linear-gradient (@origin, Rgba (0,0,0,0.0), Rgba (0,0,0, @alpha));4 Background-image:-moz-linear-gradient (@origin, Rgba (0,0,0,0.0), Rgba (0,0,0, @alpha));5 Background-image:-o-linear-gradient (@origin, Rgba (0,0,0,0.0), Rgba (0,0,0, @alpha));6 Background-image:-ms-linear-gradient (@origin, Rgba (0,0,0,0.0), Rgba (0,0,0, @alpha));7 Background-image:linear-gradient (@origin, Rgba (0,0,0,0.0), Rgba (0,0,0, @alpha));8}9 . BTN (@color, @bor-ra:2px, @fcolor: @color/2){Ten . Q-grad (@color, Top, 0.1); color:@fcolor;Border:1px solid @color/1.2;cursor:Pointer;. Border-radius (@bor-ra);. Transition (all 0.2s ease); One &:hover{ A background-color: @color/1.1; -} - &:active{ the Background-image:None; -} - }
. BTNS{.BTN (@tcolor, 3px); padding:15px 50px;} Call

Once again fix the gradient, buttoned up the pseudo-class of the button, cool!

?

　　4 Global parameter Settings Web site theme

1 @url: ". /images/"; 2 @bgcolor: #fff; 3 @fcolor: #666; 4 @hcolor: #ccc; 5 ...

Call the time to write the corresponding parameters, if possible, with a good less color calculation function, you can debug the entire site's color, so that your site is not monotonous!