Introduction of LESS and its differences with Sass 2

Variable

If you are a developer, variables should be your best friend. If you want to reuse a message (color in this example), set it to a variable. In this way, you can ensure your consistency and reduce the complexity of scrolling code to search for color values, copy and paste. You can even add or subtract the HEX value you need to render to these colors. Let's take a look at the example:

@ Blue: # 00c; @ light_blue: @ blue + #333; @ dark_blue: @ blue-#333;

If we apply these styles to three Divs, we can see the gradient effect formed by the added and subtracted HEX values:

Gradient effect from @ light_blue to @ blue to @ dark_blue

The only difference between variables in LESS and Sass is that LESS uses @ and Sass uses $. There are also some differences in scope, which I will mention later.

Mixin)

Occasionally, we will create some style rules that will be used repeatedly in the style sheet. No one will prevent you from using multiple classes in an HTML element, but you can use LESS to complete it in the style sheet. To describe this, I wrote an example:

. Border {border-top: 1px dotted #333;} article. post {background: # eee;. border;} ul. menu {background: # ccc;. border ;}

This will give you the same effect as adding. bordered class to the two elements respectively-and it will only be done in the style sheet. And it works well:

The border style is applied to both the text and unordered list.

In Sass, you need to add the @ mixin declaration before the style rule, specifying that it is a nested. Then, call it through @ include:

@ Mixin border {border-top: 1px dotted #333;} article. post {background: # eee; @ include border;} ul. menu {background: # ccc; @ include border ;}

Source: browser observation responsibility Editor: bluehearts

 

Http://www.blueidea.com/tech/web/2011/8577_2.asp