less和scss

##居中布局：
    maring和padding,没有继承。
    浏览器解析css是从右往左。
    尽量减少复合元素。
    背景自适应：背景居中：background-position: cenlter,0. cenlter是上下 ，0是左右
    父元素，设line-heighe,子元素图片设置vertical-align:middle;

##字体：
    字体有修饰，衬线字体不适合页面
    五衬线字体：无修饰，如：font-family:Arial;


##11.6 less和scss
    less与scss可以实现代码精简，代码重用，加入了函数，变量，方法的一种CSS扩展技术。

    scss和sass的区别：scss有花括号{}。
    scss变量符号：$ 变量后面加入！default,默认值，在其他地方可以修改 
    less变量符号：@
    
    $color:red; ！default. color是变量，red是值 ,！default.默认

    特殊变量：如果要放在选择器或属性中间，一定要使用特殊变量。 #{变量}

    获取集合：nth()，函数，根据下标得到数组中的某个元素

    map键值对，把变量写成键值对。
        语法：$map:(a1:10px,a2:20px,a3:30px);
        获取值：width:map_get($map,a1);
    map-get();

嵌套： 属性和选择器。
    
    &符号：&：hover.表示当前元素父元素，去掉hover前的空格

    @at-root:span,span跳出父元素，span没有父元素

    属性嵌套：
        border:{top:1px solid red};border后面加上：就是属性属性嵌套，不加就是元素嵌套。
    
继承和混合：
    
    继承：如果重用内容没有参数就用继承。
    混合：如果重用内容有参数就用混合。

    混合：
        @mixin关键字
        元素使用：@include关键字，加上@mixin后面的值。
        @mixin whb{$w,$e,$b
            width:$w;
            height:$h;
            border:$b;
        }
        使用：
        div{
            @inclade.whb(10px,10px,1px solid red); 引用。
        }

    继承：@extend关键字
        h1{font-size:20px}
        h2{@extend.h1};
        在h1前面加入%，继承h2里的h1也加入%，可以隐藏h1但继承内容还在。

原文：http://www.cnblogs.com/sgl520/p/4946982.html