A. NET programmer teaches you to use less

I am a. NET programmer, although said always do backstage, but the Web front end will also go to learn, although said technology is only a layer of window paper, but like me this kind of ADHD patients, do not stab my heart uncomfortable ah!

Good! Nonsense not to mention, the following direct to the point, as to what less is here not much to say because the official website is very clear http://less.bootcss.com/and then you enter the official website you will find that these things are difficult to read

Good! This article is to tell you how to understand these things, read my essay, only one hours of time you will master less for development!

① First we know that less needs a compiler but the official web provides the package under Nodejs NPM, which I don't need, because I recommend an automatically compiled software for simplicity and productivity.

http://koala-app.com/index-zh.html Koala download on the line, open, you can change the language!

Click Settings to change the language

The use of the time is very simple just need to drag our new folder into the above it can be said here no more, good! I'll do the following, create a new project to write less everyone, please look down.

This time you right-style.less set the CSS output path, OK the compiler finished! This is the real thing. Directly on the code

@min-width:200px; Define variable variable name it must be time @ and then the semicolon plus the value each variable can only be defined once @min-height:100px;//------------------------------------------------------- ---------------------------------------/*the following see is not quite strange, this function of similar functions, I put the common CSS transition compatibility is encapsulated in the future use of the time to call this method directly*/. Transition (@duration: 0.8s, @timing-function:ease){transition:@duration @timing-function;-moz-transition:@duration @timing-function;-o-transition:@duration @timing-function;-webkit-transition:@duration @timing-function;-ms-transition:@duration @timing-function;}/*This is also a method that has a call in the following*/. Getdefaultcolor (@color: #f00){Background-color:@color;}. DIVs{/*Call Get default color method*/    .    Getdefaultcolor (#000); Width:percentage (0.5);Height:Min-height;/*see this line of code? This is the function above if you want to encapsulate more you can use the class, here is the class is the big function nesting small function, and JS class almost written as shown above*/. Transition (0.5s,ease-in-out); /*Less is a nested selector that can be nested again when the selector is generated. divs p {} In this form & this is the name of the parent of the current selector This & in this nesting is equivalent. divs*/&:hover {background-color: #b6ff00; }}

With less is not the feeling of convenience many, in the future when we write CSS can be managed less on the line do not have to write CSS so easy to manage, but also convenient.

The resulting CSS is like this

/*the following see is not quite strange, this function of similar functions, I put the common CSS transition compatibility is encapsulated in the future use of the time to call this method directly*//*This is also a method that has a call in the following*//*Line , style.less*/. DIVs{/*Call Get default color method*/Background-color:#000000;width:50%;Height:Min-height;/*see this line of code? This is the function above if you want to encapsulate more you can use the class, here is the class is the big function nesting small function, and JS class almost written as shown above*/transition:0.5s ease-in-out;-moz-transition:0.5s ease-in-out;-o-transition:0.5s ease-in-out;-webkit-transition:0.5s ease-in-out;-ms-transition:0.5s ease-in-out;/*Less is a nested selector that can be nested again when the selector is generated. divs p {} In this form & this is the name of the parent of the current selector This & in this nesting is equivalent. divs*/}/*Line , style.less*/. Divs:hover{Background-color:#b6ff00;}

Take a closer look at what's different from the above CSS code and less

This way you can find the benefits of variables, if you can put the above good look on the comments of each code to see again, and then you once again the last officer net see less tutorial you find it will be very simple, as long as 1 hours to develop less

Next i will update mvc4 +bootstrap+knockoutjs+less to develop the project specific tutorials.

A. NET programmer teaches you to use less