css技术扩展

css扩展技术
在以前的CSS的技术上扩展：循环...

less:

1：具备其他编译的定义变量；@color:blue;@div-color:blue 定义变量的时候 在CSS中没有引号的在定义时也不需要加；
2：有作用域的问题，可以嵌套；在同一个作用域范围内，生成变量与顺序无关， 先变量声明；
3：变量按需加载或者叫延迟加载；
*4：混合（封装）定义变量用@；
.whc(@w,@h,@c){
@w;
height:@h;
border:1px solid @c;
}
div{
.whd(200px,200px,red);
}

sass（现在经常用）:

1：在scss中导入scss文件 @import“文件名”不需要加后缀名；css文件需要加后缀名；
2:定义变量用$符号
$color:red !default;默认值
$color:blue; 不管在默认值上还是下都会是blue;
$name:top;
.nav-#{$name}{ font-size:1.5em} 在css中显示为 .nav-top font-size:1.5em};

设置一个list集合
$list:1px 2px 3px 4px;
取其中一个 margin-top:nth($list,1); 获取集合中的第一个nth;
$list:(1px 2px), (3px 4px);二维数组
取其中一个 margin-top:nth(nth($list,1),1); 获取集合中的1px;

设置一个map集合
$map:(h1:red,h2:blue,h3:yellow);
color:map-get($map,h1); 得到red;

@at-root 跳出选择器；

*3：混合（mixin）; 要放在调用的之前；
@mixin wh{100px;height:100px}
调用wh; h2{@include wh;}

创建compass文件不能有中文不能有空格，不然后期会出现问题；