CSS3扩展技术

我们使用扩展技术编写代码时，需要先用编译器将我们的文件进行编译，编译后的文件才能够使用。
 less技术相关语法

less相对来说比较简单，语法也较少：
    变量的定义：
    @w:20px;
    变量的使用：
    .p2{
    width:@w
    }
    编译后的结果为：
    .p2{
    width:20px;
    }
    
    混合使用：
    先定义：
    .radius{
    border-radius:10px;
    }
    引用：
    .p1{
        .radius
    }
    传参数：
    .radius(@a){
    border-radius:@a;
    }
    引用：
    .p1{
        .radius(10px);
    }
    伪类的定义：
    .p1{
        &:hovor
    }
    以上的&表示当前元素的父元素，上面的代码转译之后为：
    .p1:hovor{ };

sass技术 
    sass的功能比less强大许多，语法也有些不同，sass的文件后缀名有.sass，也有.scss,现在多用.scss。
    下面来看语法：
    导入css文件：
    @import "a.css"
    导入scss文件：
    @import "b"//不用写后缀名
    
    变量的定义：
    $color:blue !default;//default为设置的默认值，可允许修改
    在元素中嵌入一个变量，需要用#{}将变量括起来
    $direct:top;
    .border-#{$direct}{ };
    
     多值变量：
    $num:1px 2px 3px 4px;
    .p1{
        padding:$num
    }
    margin:nth($num,1)//nth:根据下标序号获取数组中的值（1px）
    $num1:1px 2px,3px 4px;
    margin:nth($num1,2)//3px,4px
    
    键值对：
    $map:(a1:10px,a2:5px,a3:3px,a4:1px);
    取值：
    .p{
        width：map-get($map,a1)
        height:map-get($map,a2)
    }
    伪元素的定义：
    .p2{
        &:hovor{
        }
    }//&为此元素的父元素
    
    div{
        @at-root p{
            color:red
        }
    }
    p的执行结果：
    div{};
    p{
        color:red
    }
    @at-root是表示跳出父元素
    
    属性的嵌套：
    .d2{
        border:{
            top:20px;
            left:25px;
        }
    }
    编译为：
    .d2{
        border-top:20px;
        border-left:25px;
    }
    scss中，加了：会编译成（-）属性，不加：为选择器的嵌套

反选：
    .child{
        @at-root .p1 &{
        }
    }
    译成：
    .p1 .child{}
    
    混合：
    先定义：
    @mixin whb{
        width:200px;
        height:100px;
    }
    引用：
    div{
        @include whb
    }
     混合，传参的定义：
    @mixin whb($w,$h){
        width:$w;
        height:$h
    }
    调用：
    div{
        @include whb(20px,10px);
    }
    继承：
    %h1{
        font-size:12px;
    }//%会将h1隐藏，不会显示在CSS代码中
    应用：
    p2{
        @extend %h1
    }
 scss混合和继承
    如果重用的代码里面没有参数，就用继承，有参数，用混合。