一、资源
1.koala(中文，免费)
2.koalad的中文wiki
3.SASS界面编译工具——Koala的使用© [w3cplus.com]
4.SASS基础教程——SASS基本语法与特性© [w3cplus.com]
二、使用koala
1.安装
现在koala官网下载相应的版本（ps：我是windows版本）
下载之后，点击下一步下一步，完成安装，软件是卡拉形象的。
image.png
2.设置
软件刚刚打开，默认是英文版本的，需要自己设置成中文。当你设置好之后，需要关闭重新打开，软件才会变成中文的。
image.png
3.添加项目
第一种，根据软件提示，直接把相应项目拖进来
image.png
image.png
第二种，点击“添加项目”按钮，选择相应的文件。
image.png
4.删除项目
抱歉，手残，截图截不出来，只能文字描述。
在koala左边项目区，选中你要删除的项目，右键，出现选项，点击删除，就能删除你要删除的项目。
5.编译scss
image.png
编译结果.png
koala刷新之后.png
三、简单运用scss
因为其他的不太会，最近就使用了scss，感觉他的使用方法和css基本差不多，但是和css比起来，维护方便，不需要重复写css（例如高度，宽度，颜色值等），更好的是还能有变量。
SCSS语法规则和CSS的语法规则差不多，由选择器、属性和属性三部分组成，并且和大括号`{}`与分号`;`配合在一起使用。
选择器{
属性:属性值;
}
1.scss的变量【$】
变量申明用$，变量可以在整个文件中重复使用
/*scss中申明变量*/
$color:red;
/*scss中引用变量*/
.head{
color:$color;
}
/*css*/
.head{color:red;}
2.scss的嵌套
1.元素嵌套
父元素底下的相关元素，可以写在父元素的{}里面，元素的相关选择器可以使用&相连。
/*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：作为一个选择器，可在里面定义变量和默认参数
/*先申明mixins*/
@mixin mixins名称 { 样式规则 }
@mixin mixins名称（$参数名:参数值） { 样式规则 }
@mixin mixins名称（$参数名1,$参数名2） { 样式规则 }
/*定义mixin*/
@mixin fixbox($width:50px){
width:$width;
border:2px red solid;
}
@mixin fixbox($width,$height){
width:$width;
border:2px red solid;
}
/*调用mixin*/
.head{
@include fixbox();
/*更改参数名的参数值*/
@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
