一、資源

1.koala(中文，免費)
2.koalad的中文wiki
3.SASS界面編譯工具——Koala的使用? [w3cplus.com]
4.SASS基礎(chǔ)教程——SASS基本語法與特性? [w3cplus.com]

二、使用koala

1.安裝

現(xiàn)在koala官網(wǎng)下載相應(yīng)的版本（ps：我是windows版本）
下載之后，點擊下一步下一步，完成安裝，軟件是卡拉形象的。

image.png

2.設(shè)置

軟件剛剛打開，默認(rèn)是英文版本的，需要自己設(shè)置成中文。當(dāng)你設(shè)置好之后，需要關(guān)閉重新打開，軟件才會變成中文的。

image.png

3.添加項目

第一種，根據(jù)軟件提示，直接把相應(yīng)項目拖進(jìn)來

image.png

image.png

第二種，點擊“添加項目”按鈕，選擇相應(yīng)的文件。

image.png

4.刪除項目

抱歉，手殘，截圖截不出來，只能文字描述。
在koala左邊項目區(qū)，選中你要刪除的項目，右鍵，出現(xiàn)選項，點擊刪除，就能刪除你要刪除的項目。

5.編譯scss

image.png

編譯結(jié)果.png

koala刷新之后.png

三、簡單運用scss

因為其他的不太會，最近就使用了scss，感覺他的使用方法和css基本差不多，但是和css比起來，維護(hù)方便，不需要重復(fù)寫css（例如高度，寬度，顏色值等），更好的是還能有變量。

SCSS語法規(guī)則和CSS的語法規(guī)則差不多，由選擇器、屬性和屬性三部分組成，并且和大括號`{}`與分號`;`配合在一起使用。
選擇器{
  屬性:屬性值;
}

1.scss的變量【$】

變量申明用$，變量可以在整個文件中重復(fù)使用

/*scss中申明變量*/
$color:red;
/*scss中引用變量*/
.head{
  color:$color;
}
/*css*/
.head{color:red;}

2.scss的嵌套

1.元素嵌套
父元素底下的相關(guān)元素，可以寫在父元素的{}里面，元素的相關(guān)選擇器可以使用&相連。

/*css*/
.head{}
.head:after{}
.head div{}
.head ul{}
.head ul li{}
/*scss嵌套*/
.head{
  ul{
        li{}
     }
  div{}
  &:after{}
}

2.屬性嵌套

/*css*/
li {
  font-style: italic;
  font-family: serif; 
  font-weight: bold; 
  font-size:1.2em;
 }

/*scss嵌套*/
.li{
  font{
        style:italic;
        size:1.2em;
     }
}

3.Mixins：作為一個選擇器，可在里面定義變量和默認(rèn)參數(shù)

/*先申明mixins*/
@mixin  mixins名稱 { 樣式規(guī)則 }
@mixin  mixins名稱（$參數(shù)名:參數(shù)值） { 樣式規(guī)則 }
@mixin  mixins名稱（$參數(shù)名1,$參數(shù)名2） { 樣式規(guī)則 }
/*定義mixin*/
@mixin fixbox($width:50px){
      width:$width;
      border:2px red solid;
}
@mixin fixbox($width,$height){
      width:$width;
      border:2px red solid;
}
/*調(diào)用mixin*/
.head{
    @include fixbox();
    /*更改參數(shù)名的參數(shù)值*/
    @include fixbox(3px);
    @include fixbox(50px,60px);
}

4.extend：繼承樣式

選擇器{ @extend 定義的類 }
/*方法一：建立一個新的class*/
.box{width:100px;font-size:14px;}
.head{
      @extend .box;
      border-bottom:2px red solid;
}
.footer{
      @extend .box;
      border-bottom:2px red solid;
}
/*css*/
.head,.footer{width:100px;font-size:14px;}
.head{ border-bottom:2px red solid;}
.footer{ border-bottom:2px red solid;}
/*方法二：用%代替. */
%box{width:100px;font-size:14px;}
.head{
      @extend %box;
      border-bottom:2px red solid;
}
.footer{
      @extend %box;
      border-bottom:2px red solid;
}
/*css*/
.head,.footer{width:100px;font-size:14px;}
.head{ border-bottom:2px red solid;}
.footer{ border-bottom:2px red solid;}

推薦使用方法二，用%

四、注意點

1.假如你使用的時候，直接報錯，就需要注意下，你所在目錄是否有中文路徑，如果有，建議換成英文的
例如:c:/demo/html