Automated and efficient css development and flexible change-jerrylsxu

Automatic and efficient css development and free talk about the flexible changes-jerrylsxu css is a code that separates html from style parsing. Its appearance greatly improves the efficiency of programmers, and later maintenance efficiency. But since its development, the rigid and monotonous writing has become increasingly unable to satisfy the flexible thinking of programmers. In many cases, css is written in a bad mood, some smart programmers have invented less.

Less is designed to simplify css development and flexible css development. It is very powerful, flexible, and quick to use, so it is increasingly favored by front-end development, I will not talk about the basic syntax. I believe that DU Niang has countless tutorials for reference. I will talk about some things that are made with the flexibility of less.

　　1 less compatible with css3 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

Similarly, the boss no longer needs to worry about my cross-browser compatibility with css3;

　　2. encapsulate the less function as a code block

1. list (@ show: 4, @ width: 100%, @ line: 10px) {2 width: @ width; overflow: hidden; 3 ul {4. cf; margin-right:-@ line; background-color: red 5} 6 li {7 float: left; width: (@ width-(@ show-1) * @ line)/@ show; margin-right: @ line; margin-bottom: @ line; 8 img {max-width: 100%;} 9} 10}
# Xx_list {. list (4, 1030px, 10px);} // call. The parameter is displayed in four rows, total width, and row spacing.

The item list is displayed directly. (. cf is used to clear the 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 button and button pseudo class

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,), rgba (, 0, 0, @ alpha); 4 background-image: -moz-linear-gradient (@ origin, rgba (0.0, 0,), rgba (, 0, 0, @ alpha); 5 background-image: -o-linear-gradient (@ origin, rgba (0.0, 0,), rgba (, 0, 0, @ alpha); 6 background-image: -ms-linear-gradient (@ origin, rgba (0.0, 0,), rgba (, 0, 0, @ alpha); 7 background-image: linear-gradient (@ origin, rgba (0.0, 0,), rgba (, 0, @ alpha); 8} 9. btn (@ color, @ bor-ra: 2px, @ fcolor: @ color/2) {10. q-grad (@ color, top, 0.1); color: @ fcolor; border: 1px solid @ color/1.2; cursor: pointer ;. border-radius (@ bor-ra );. transition (all 0.2 s finished); 11 &: hover {12 background-color: @ color/1.1; 13} 14 &: active {15 background-image: none; 16} 17}
. Btns {. btn (@ tcolor, 3px); padding: 15px 50px;} // call

The gradient is fixed at one time, and the pseudo class of the button is fixed, cool!

 

　　4. Set the website subject using global Parameters

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

Write the corresponding parameters during the call. If possible, use the less color computing function to debug the color of the entire website, so that your website is not monotonous at all!