Use coffee to write scripts, and add a little bit of CSS syntax sugar. 2. Learn less in five minutes.

Coffeescript + HTML5 + less is a new combination. It seems that less is easier to win. Try sugar first.

Less so small thing, unexpectedly to overturn the wall, it is really not rational, simply unreasonable, No matter so much first, then look at this. http://www.lesscss.net/

This less, less than CSSCode, More dynamics, more reuse. Provides variables, inheritance, operations, functions, etc. Let's take a look.

The first is how to generate CSS at the end of this things. The two usage methods are as follows. The easiest choice is the CSS generation function provided by the website. after learning, you can use it. of course, you can also directly write in runjs. the environment problem has been solved. Let's look at the syntax.

1. Variables: This is a good function. Why didn't CSS come to mind when setting standards?

Actually, it is to define a constant @ car: value. @ VaR is similar to the variable definition in SQL.

2. HYBRID:This is a good function. Why didn't CSS come to mind when setting standards?

In fact, it is to introduce another CSS name in CSS, as shown below:

@ Fontcolor: red;. H2{Font-size:22px;}Div{Color:@ Fontcolor;. H2}
 

It's really simple.Any CSSClass,IDOrElementAttribute sets can be introduced in the same way.

3. Parameters with mixing:The parameter. H2 (@ variable name [: default value]) can be added to the mixed definition, and multiple parameters can be represented using... as follows:

 
. H2 (@ size: 12px){Font-size:@ Size;}Div{Color:@ Fontcolor;. H2 (22px)}
 

Pattern-matching and guard expressions are many, that is, they are mixed after condition judgment.

4. nesting:This is a good function. Why didn't CSS come to mind when setting standards?

CSS is defined in CSS, as follows:

 
# Header{Color:Black;. Navigation {font-size:12px}. Logo{Width:300px;&:Hover {text-Decoration: None}}}
 

& More usage of this symbol, skipped first.

5. Operation:This is a good function. Why didn't CSS come to mind when setting standards?

Any number, color, or variable can be involved in the operation, such as border: (@ width * 2) solid black;

6. functions:Less provides a variety of functions for controlling color changes, processing strings, arithmetic operations, and so on.

7. namespace:To better encapsulate the organization, use the "> Number. Space Name> style name" when introducing it, for example:

 
# Header{Color:Orange;# Bundle>. Button;}
 

8. Scope:Such as variable definition, similar to JS

9. Notes:In addition to/**/comments, you can also use // comments, but are automatically filtered out after generation. It is strange that the comments such as // are not supported when CSS is defined?

10. Import:Importing:

 
@ Import "Lib. Less"; @ import "lib"; @ import "lib.css ";
 

11. String interpolation:You can insert the variable into the string. @ {Val}, for example, background-image: URL ("@ {base-URL}/images/bg.png ");

12. Avoid Compilation:~ "XXX", so that the xxx content will be output as CSS

13. Select interpolation:Variables such as @ {Val} can also be used with selector names, such as:. @ {name} {color: black ;}

14. Javascript evaluation:JS is used in reverse direction, which is not recommended by the author.

What then? Then there will be no more.Less is so few. Remove the 14th rules that are not recommended and the complex section that has been skipped. A total of more than a dozen rules can be learned in about 5 minutes, of course, I spend more time learning and writing than five minutes, and there are more less functions. However, intuitively, these functions are useless, most of them are color-related.