A. net programmer teaches you how to use less,. net programmer less

A. net programmer teaches you how to use less,. net programmer less

I am. net programmers, although they have always been working in the background, but the web Front-end will also learn, although the technology is only a window, but I am such a ADHD patient, don't break my heart!

Good! Not much nonsense, the following direct subject, as to what is less here not to mention because the official website to write very clear http://less.bootcss.com/then you go to the official website after you will find that these things are difficult to understand

Good! This article tells you how to understand the content. After reading this article, it takes only one hour for you to master less for development!

① First, we know that less requires a compiler, but the official website provides packages under nodejs npm. I don't need these packages, because in order to be simple and improve efficiency, an automatically compiled software I recommend

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

Click set to change language

It's easy to use. You just need to drag the folder we created to the top. Here we will not talk about it any more! Next I will operate. Create a new project to write less. Please refer to the following.

 

In this case, right-click style. less and set the css output path. The compiler is finished! This is the real question.

@ Min-width: 200px; // when defining a variable name, @ is followed by a semicolon (;). Each variable can only be defined once @ min-height: 100px; // functions/* See below is not unfamiliar, this function is similar, I can directly call this method after encapsulating common css transition compatibility */. transition (@ duration: 0.8 s, @ timing-function: callback) {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 is also called below */. getDefaultColor (@ color: # f00) {background-color: @ color ;}. divs {/* call the default color Method */. getDefaultColor (#000); width: percentage (0.5); height: min-height;/* Have you seen this line of code? This is the above function. If you want to encapsulate more functions, you can use the class. The class mentioned here is the nested small function of the large function. It is similar to the js class as shown above */. transition (0.5 s, nested-in-out);/* less is a nested selector that can be generated by nesting the selector again. divs p {} is in this form & this is the name of the parent of the current selector & it is equivalent to in this nesting. divs */&: hover {background-color: # b6ff00 ;}}

 

 

It is much more convenient if we have less. We can manage less when writing css in the future, so we don't need to write css. This facilitates management and saves time.

The generated css is like this.

/* See below is not a stranger, this function is similar, I encapsulate the common css transition compatibility and then call this method directly when using it. * // * this is also a method. * // * line 20 is also called below., style. less */. divs {/* call the default color Method */background-color: #000000; width: 50%; height: min-height;/* Have you seen this line of code? This is the above function. If you want to encapsulate more functions, you can use classes. The classes mentioned here are nested small functions of large functions, similar to js classes, the method is shown above */transition: 0.5 s bytes-in-out;-moz-transition: 0.5 s bytes-in-out;-o-transition: 0.5 s bytes-in-out;-webkit-transition: 0.5 s bytes-in-out;-ms-transition: 0.5 s bytes-in-out; /* less is a nested selector, which can be generated by nesting the selector again. divs p {} is in this form & this is the name of the parent of the current selector & it is equivalent to in this nesting. divs */}/* line 33, style. less */. divs: hover {background-color: # b6ff00 ;}

 

Take a closer look at what is different from the above css code and the above less

In this way, you can find the benefits of variables. If you can read the above comments of every code, then you can go to the official website again to view the less tutorial, and you will find it very simple. You can develop less in just one hour.

Next, I will update mvc4 + bootstrap + knockoutjs + less to develop a specific project tutorial.