CSS Technology Extensions

CSS Extension Technology
Extending the technology of the previous CSS: looping ...

Less

1: With other compiled definition variables; @color: blue; @div-color:blue when defining a variable, there is no quotation mark in the CSS when the definition does not need to add;
2: There are scope problems, can be nested; within the same scope, the generated variables are independent of the order, and the variables are declared;
3: The variable is loaded on demand or delayed loading;
* 4: Mix (package) define variable with @;
. WHC (@w,@h,@c) {
width:@w;
Height:@h;
border:1px solid @c;
}
div{
. WHD (200px,200px,red);
}

Sass (now often used):

1: Import the Scss file in Scss. @import "file name" does not need a suffix; CSS files need to be appended with the suffix name;
2: Define variables with $ sign
$color: red!default; Default value
$color: Blue; It will be blue either on the default value or the next.
$name: Top;
. nav-#{$name} {font-size:1.5em} appears in CSS as. Nav-top font-size:1.5em};

Set up a list collection
$list: 1px 2px 3px 4px;
Take one of the Margin-top:nth ($list, 1); Gets the first nth in a collection;
$list:(1px 2px), (3px 4px), two-dimensional array
Take one of the Margin-top:nth (nth ($list, 1), 1); Gets the 1px in the collection;

Set up a Map collection
$map:(H1:red,h2:blue,h3:yellow);
Color:map-get ($map, H1); Get red;

@at-root jump out of the selector;

* 3: Mixed (mixin); To be placed before the call;
@mixin wh{width:100px;height:100px}
Call WH; h2{@include WH;}

Create compass file can not have Chinese can not have spaces, or later there will be problems;

CSS Technology Extensions