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混合和繼承
    若是重用的代碼裏面沒有參數，就用繼承，有參數，用混合。