LESS與SASS的區別

前言

首先sass和less都是css的預編譯處理語言，他們引入了mixins，引數，巢狀規則，運算，顏色，名字空間，作用域，JavaScript賦值等 加快了css開發效率,當然這兩者都可以配合gulp和grunt等前端構建工具使用

sass和less主要區別:在於實現方式 less是基於JavaScript的在客戶端處理 所以安裝的時候用npm，sass是基於ruby所以在伺服器處理。

很多開發者不會選擇LESS因為JavaScript引擎需要額外的時間來處理程式碼然後輸出修改過的CSS到瀏覽器。關於這個有很多種方式，我選擇的是隻在開發環節使用LESS。一旦我完成了開發，我就複製然後貼上LESS輸出的到一個壓縮器，然後到一個單獨的CSS檔案來替代LESS檔案。另一個選擇是使用LESS.app來編譯和壓縮你的LESS檔案。兩個選擇都將最小化你的樣式輸出，從而避免由於使用者的瀏覽器不支援JavaScript而可能引起的任何問題。儘管這不大可能，但終歸是有可能的

LESS詳細

首先擴充套件檔名的格式是 xxx.less

在此推薦大家在練習環節可以用

 這種方式編譯less

但在實際專案中 還是用命令列的 lessc xxx.less>xxx.css 方式然後引入編譯後的css檔案 這樣減少在執行時上面出現的問題

//安裝lessnpm install -g less

變數

@變數名:值@width：100px;
.box{
    width:@width;
}

混合

定義classa 然後可以將classa引入到classb中
.classa(a){
    width:@width;
}

.classb{
    .classa(a);
}

巢狀規則

父級{
    子集
}

函式和運算

可以將值計算
@the-border: 1px;
@base-color: #111;@red:        #842210;#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

SASS詳細

首件擴充套件檔名的格式是 xxx.scss 或者是 xxx.sass

使用方法: sass xxx.scss xxx.css

編譯風格：

nested:巢狀縮排的css程式碼，預設
expanded:沒有縮緊的,擴充套件的css程式碼
campact:簡介格式的css程式碼
compressed:壓縮後的css程式碼(生產環境)

使用的時候　sass --style compressed xxx.sass xxx.css

監聽目錄

sass --watch xxx.scss:xxx.css //監聽檔案sass --watch scsspath:csspath //監聽資料夾

變數

$變數名:值
$width：100px;

.box{    width:$width;
}

如果變數包含字串則寫在 #{}之中$c:color;

.box{
    border-#{$c}:red;}

巢狀計算

less和sass巢狀相同，計算同理

繼承

同less混合相同 定義classa 然後再classb可飲用classa值

//使用方法 定義classa .classb{    @extend .classa
}

Mixin

即重用程式碼塊

//使用方法先用@mixin命令定義一個程式碼塊@mixin left(引數1，引數2){    float:left;
    margin-left:10px;
}//使用@include呼叫剛剛定義的程式碼塊.box{
    @inclidu left(引數1，引數2);
}

顏色函式 lighten(顏色，百分比)

插入檔案

@import命令插入外部檔案 .scss和css都可

條件語句

//@if 可以用來判斷 @else 則是配套

.box{
    @if 1+1>1 {width:100px;}@else {
        width:200px;
    }
}

迴圈語句

//@for @while @each

@for $i from 1 to 10{
    border-#{$i}{
        border:#{$i}px solid red;
    }
}

//@while$i:6;
@while $i>0{
    .item-#{$i}{
        width:2em*$i;
    }    $i:$i-2;
}

//@each
    @each $member in a, b, c, d {
　　　　.#{$member} {　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

自定義函式

@function name($n){
    @return $n*2;
}.box{    width:name(value);
}

總結

總體來說sass和less都有各自的好處，這要根據每個開發者的習慣和愛好來使用，都可提高開發效率，當然還有stylus等工具，因為目前未使用過所以不做評判，個人比較傾向sass，至於比較，兩者都有其優缺點，如果你開發環境中並沒有ruby 並且你不想安裝ruby 你就可以使用less，如果你覺得sass的語法你更傾向並且你安裝了ruby 你就可以使用sass。總之工具不重要，碼出一手好程式碼才是真理。

作者：dali_saymore
連結：