sass的使用基于ruby环境，建议在框架中使用，我这里使用vue示范，不介绍ruby安装，太麻烦了，建议接触vue了在学习sass
首先安装sass，然而需要注意的是，我们编写的sass最终还是转译css，需要安装sass-loader，而sass-loader依赖于node-sass
npm install --save-dev node-sass
npm install --save-dev sass-loader
安装好之后，注意我是在vue-cli构建的文件中使用，如果使用的是webpack模板进入build中的webpack.base.conf.js配置文件，找到rules，后面添加此代码即可
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
如果是webpack-simple模板的，在webpack.config.js中自行配置即可
在APP.vue中修改style
此时背景色已经变色，好OK sass编译成功
sass基本用法
变量
SASS允许使用变量，所有变量以$开头。
刚才前面的例子也看到了
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
比如说此处我们写个div
看着是很麻烦，如果运用好了，代码量大大减少
计算功能
SASS允许在代码中使用算式：
.box{
margin-top: 50px+50px;
width: 100px;
height: 100px;
border: 1px solid black;
/* border-left-color:red*/
border-#{$left}-color:red
}
嵌套
SASS允许选择器嵌套。这个也是最常用的，在我们还不熟悉其他功能的情况下，此功能是最容易快速掌握并运用的
box
box
box
在box中新增俩个元素
属性也可以嵌套，当然记得前面加冒号
p{
width: 100px;
height: 20px;
border: 1px solid;
border: {
color:red
}
font: {
size:20px
}
}
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
p{
&:hover { color: pink; }
&:hover span{ color: #b3daff; }
}
注释
SASS共有两种注释风格。
标准的CSS注释 / comment / ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息
box
box
box
代码的重用
SASS允许一个选择器，继承另一个选择器。比如有两个样式分别是class1 和class2
.class1 {
border: 1px solid #ddd;
}
如果class2也想要class1的样式
.class1 {
width: 100px;
height: 100px;
border: 1px solid red
}
.class2{
@extend .class1;
border: 2px solid green
}
@extend继承 类名，可以在基础上添加新的样式 覆盖
Mixin
@mixin left{
float: left;
margin-left: 100px
}
.class1{
height: 100px;
width: 100px;
border: 1px solid red;
@include left
}
使用@mixin 定义变量属性，@include使用 贼凶残
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 100px){
float: left;
margin-left: $value
}
.class1{
height: 100px;
width: 100px;
border: 1px solid red;
@include left(200px)
}
默认传入100 可修改参数变200
如果我们给浏览器做兼容
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
直接定义好变量
li { @include rounded(top, left); }
ul { @include rounded(top, left, 5px); }
相当于直接兼容了
颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。这个相对高级，入门就不解释了
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
可以自行百度了解深入
插入文件
@import命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
高级用法
条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
这个比较好理解
循环语句
for循环使得我们的class命名极其鸡肋
@for $i from through
@for $i from to
$i 表示变量
start 表示起始值
end 表示结束值
这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。
如下代码，先来个使用 through 关键字的例子：
@for $i from 1 through 3 {
.item-#{$i} { width: 20px * $i; }
}
编译出来的css
.item-1 {
width: 20px;
}
.item-2 {
width: 40px;
}
.item-3 {
width: 60px;
}
如果使用to 就是前面俩个
while循环
$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}
编译后就是
.while-4 {
width: 24px;
}
.while-3 {
width: 23px;
}
.while-2 {
width: 22px;
}
.while-1 {
width: 21px;
}
@each就不介绍了，这个有点复杂，待你深入sass了可以看看
自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}