CSS——Sass和Less的特點和比較

Sass和Less
　　  Sass和Less都屬於CSS預處理器，CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一種編程的特性，如：變量、語句、函數、繼承等概念。將CSS作為目標生成文件，然后開發者就只要使用這種語言進行CSS的編碼工作。
　　Sass官網地址：http://sass-lang.com/
　　Less官網地址：http://lesscss.org/
語法：
　　注釋:

//單行注釋不會被編譯出來
/*
　　多行注釋，也就是CSS的注釋方式，可以編譯出來
*/

　　變量：
　　　　Less 　　@variable_name
　　　　Sass 　　$variable_name
　　插值:

　　　　Less

@variable_name : margin;
@{variable_name} : auto;

　　　　Sass 

$variable_name : margin;
#{$variable_name} : auto;

　　作用域
　　　　Less 　　變量查找遵循就近原則。
　　　  Sass 　　作用域是有順序的
　　選擇器嵌套

ul{
    li{
        div{margin:10px;}
        p{margin:20px}
    }
}       

　　偽類嵌套

ul{
    li{
        div{margin:10px;}
    }
    &:hover{
        background:red;
    }
}            

　　屬性嵌套(僅Sass有，Less沒有)

ul{
    &:hover{
        background:red;
        font : {
            size:10px;
            weight:bold;
        }
    }
}    

　　運算、單位、轉義、顏色
　　　　Less:
　　　　　　單位：當兩個數值相加時，若單位不同，以第一個數值的單位為准
　　　　　　轉義：~"20px / 1.5"
　　　　　　顏色：顏色的數值 * 2 = 數值二倍的顏色

@num : 100px;
.box1{
    width : @num * 3;
    height : @num + 2em;
    margin : 2em + @num;
    pading : ~"20px / 1.5";
    color : #102302 * 2;
}

　　　　Sass:
　　　　單位：Sass中比較嚴格，單位不同，不能進行運算
　　　　運算：默認 / 是進行分割操作；若想運算需加括號：(20px / 1.5)
　　　　顏色：同樣可以計算

$num : 100px;
.box2{
    width : $num * 3;
    margin : 20px / 1.5;
    pading : (20px / 1.5);
    color : #102302 * 2;
}

　　函數
　　　　通用：
　　　　　　round() 四舍五入取整
　　　　　　percentage() 轉換成百分比的形式
　　　　　　...
　　　　Less特有:
　　　　　　sqrt() 開方
　　　　　　...
　　　　Sass特有:
　　　　　　random() 產生隨機數
　　　　　　...
　　　　　　還可自定義函數：

@function sum($n,$m){
    @return $n + $m;
}
fontsize : sum(4px,5px);

　　混入(把不同的CSS組合到一起)
　　　　Less：

/*既渲染又混入*/
.show{
    display : 'block';
}
/*僅混入，()可以表示僅混入，也可以進行傳參*/
.hide(){
    display : 'none';
}
.box3{
    fontsize : 16px;
    .show;
    .hide();
}

　　　　Sass:

/*Sass僅混入，加()也可傳參*/
@mixin show{
    display : block;
}
.box4{
    width : 100px;
    @include show;
}

　　命名空間(僅Less有)

#nm(){
    .show{display : inline-block; }
}
.box5{
    #num.show;
}

　　繼承
　　　　Less:

.line{
    display : inline;
}
.box6{
    &:extend(.line);
}
.box7{
    &:extend(.line);
}

　　　　Sass:

.line{
    display : inline;
}
.box7{
    @extend .line;
}
.box8{
    @extend .line;
}

/*line僅占位，不渲染*/
%line{
    display : inline;
}
.box7{
    @extend %line;
}
.box8{
    @extend %line;
}

　　合並(多個值合並到一齊)
　　　　Less:

.box9{
    /*
        合並用','隔開
    */
    background+ : url(a.png);
    background+ : url(b.png);
    /*
        合並用空格隔開
    */
    tranform+_ : scale(2);
    tranform+_ : rotate(30deg);
}

　　　　Sass:

$background : (
    a : url(a.png),
    b : url(b.png)
);
$tranform : (
    a : scale(2),
    b : rotate(30deg)
);
.box9{
    background : map-values($background);
    transform : zip(map-values($tranform)...);
    /*
        zip()把逗號去掉變成空格
    */
}    

　　媒體查詢

.box10{
    @media all and (min-width : 768px){
        width : 600px; 
    }
}

　　條件
　　　　Less:

@count : 5;
.get(@cn) when (@cn > 4){
    width : 100px + @cn;
}
.get(@cn) when (@cn < 4 ){
    width : 10px + @cn;
}
.box11{
    .get(@count);
}

　　　　Sass:

$count : 5;
.box11{
    @if($count >4){
        width : 100px + @count;
    }
    @else{
        width : 10px + @count;
    }
}

　　循環
　　　　Less:

@count2 : 0;
.get2(@cn) when (@cn < 3){
    .get((@cn+1));
    .box-@{cn}{
        width : 100px + @cn;
    }
}
.get2(@count2);
    

　　　　Sass:

@for $i from 0 through 2{
    .box-#{$i}{
        width : 100px + $i;
    }
}

　　導入

@import './xxx.scss'
@import './xxx.less'

　　...