sass(scss)、less用法與區別

css預處理器：爲了兼容瀏覽器，去掉css寫的不少冗餘代碼，即簡化css代碼的編寫

PS：scss是sass3.0升級而來，主要區別是，嵌套由縮進變成花括號

一、保存文件擴展名不同

sass通常保存爲.scss擴展名，less擴展名爲.less，stylus擴展名爲.styl

二、聲明變量符號不同

sass聲明變量時候符號使用$，less則使用@，stylus對變量名沒有任何限定，變量名與變量值之間能夠用冒號、空格和等號隔開。

例如：

less：

@orange:#feb914;

header {

     background-color:@orange;

}

sass：

$orange:#feb914;

header {

    background-color:$orange;

}

stylus：

bgorange = #feb914;

header

     background-color bgorange

三、變量做用域不同

先局部定義中查找，若是找不到，則逐級向上查找

PS:less全部變量的計算以最後一次被定義爲準

例如：

less：

@size: 40px;

.content {

     width: @size;

}

@size:60px;

.container {

     width: @size;

}

輸出：

.content {

     width: 60px;

}

.container {

     width: 60px;

}

sass：

同上輸出爲：

.content {

     width: 40px;

}

.container {

     width: 60px;

}

stylus同sass，即變量的計算以變量最近一次的定義爲準

四、引入外部css文件

sass：

引入的文件名若是如下劃線_開頭的話，sass會認爲該文件是一個引用文件，不會將其編譯爲css文件

@import

例如：

// 源代碼

@import "_test1.scss";

@import "_test2.scss";

@import "_test3.scss";

// 編譯後

h1 {

   font-size:17px;

}

h2 {

   font-size:17px;

}

h3 {

    font-size:17px;

}

less：擴展語法

@import (keyword) "filename";

keyword:

1）、reference:使用一個外部文件參與編譯，但不輸出其內容

2）、inline:直接將引入的文件放入輸出文件中，但不處理這個引入的文件

3）、less:無論文件擴展名是什麼都將該文件做爲一個less文件處理

4）、css:無論文件擴展名是什麼都將文件做爲一個css文件處理

5）、once:只進入文件一次（去重），這是默認方式

5）、multiple:能夠引入文件屢次

stylus:

同sass，自定義指令@require能夠進行引入文件的去重，引入的文件只會編譯一次

五、嵌套

1)、引用父級選擇器的標記：&、@at-root、/

less:

#sort {

    margin-top: 24px;

    ul {

       margin-left: 8px;

       line-height: 36px;

       vertical-align: middle

    }

}

input {

    width: 80px;

    &:-ms-input-placeholder {

         font-size: 16px;

         color: @white;

    }

}

編譯爲：

#sort {

   margin-top:24px;

}

#sort ul {

   margin-left: 8px;

   line-height: 36px;

   vertical-align:middle;

}

input {

    width: 80px;

}

input:-ms-input-placeholder {

    font-size: 16px;

   color: @white;

}

2)、sass 屬性嵌套

.fakeshadow {

     border: {

        style: solid;

        left: {

           width: 4px;

           color: #888;

        }

         right: {

            width: 2px;

            color: #ccc;

         }

      }

}

編譯爲：

.fakeshadow {

     border-style: solid;

     border-left-width: 4px;

     border-left-color: #888;

     border-right-width: 2px;

     border-right-color: #ccc;

}

六、混入（mixin）

某段css常常須要在多個元素中使用，可使用mixin

less：

.my-mixin {

   color: black;

}

.my-other-mixin() {

     background: white;

}

.my-hover-mixin() {

   &:hover {

       border: 1px solid red;

    }

}

.border-radius(@radius: 5px) {

     -webkit-border-radius: @radius;

     -moz-border-radius: @radius;

     border-radius: @radius;

}

.class {

   .my-mixin;

   .my-other-mixin;

}

button {

    .my-hover-mixin();

}

#header {

   .border-radius(4px);

}

.button {

   .border-radius;

}

編譯爲：

.my-mixin {

    color: black;

}

.class {

   color: black;

   background:white;

}

button:hover{

    border:1px solid red;

}

#header {

   -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

}

.button {

   -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

}