一上真、資源
1.koala(中文鸠项，免費)
2.koalad的中文wiki
3.SASS界面編譯工具——Koala的使用? [w3cplus.com]
4.SASS基礎(chǔ)教程——SASS基本語法與特性? [w3cplus.com]
二、使用koala
1.安裝
現(xiàn)在koala官網(wǎng)下載相應的版本（ps：我是windows版本）
下載之后阀参，點擊下一步下一步飞袋，完成安裝蔗包，軟件是卡拉形象的。
image.png
2.設置
軟件剛剛打開甫题，默認是英文版本的馁筐，需要自己設置成中文。當你設置好之后坠非，需要關(guān)閉重新打開敏沉，軟件才會變成中文的。
image.png
3.添加項目
第一種炎码，根據(jù)軟件提示盟迟，直接把相應項目拖進來
image.png
image.png
第二種，點擊“添加項目”按鈕潦闲，選擇相應的文件攒菠。
image.png
4.刪除項目
抱歉，手殘矫钓，截圖截不出來要尔，只能文字描述舍杜。
在koala左邊項目區(qū)，選中你要刪除的項目赵辕，右鍵既绩，出現(xiàn)選項，點擊刪除还惠，就能刪除你要刪除的項目饲握。
5.編譯scss
image.png
編譯結(jié)果.png
koala刷新之后.png
三、簡單運用scss
因為其他的不太會蚕键，最近就使用了scss救欧，感覺他的使用方法和css基本差不多，但是和css比起來锣光，維護方便笆怠，不需要重復寫css（例如高度，寬度誊爹，顏色值等）蹬刷，更好的是還能有變量。
SCSS語法規(guī)則和CSS的語法規(guī)則差不多频丘，由選擇器办成、屬性和屬性三部分組成，并且和大括號`{}`與分號`;`配合在一起使用搂漠。
選擇器{
屬性:屬性值;
}
1.scss的變量【$】
變量申明用$迂卢，變量可以在整個文件中重復使用
/*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：作為一個選擇器，可在里面定義變量和默認參數(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
