Sass是怎么来的？我是这样理解的，有那么一群进入前端领域的攻城狮，发现css竟然不是程序语言，那怎么在其他前端攻城狮面前装逼呢？那能不能让css能听懂程序语言的指令呢？然后呢，他们就整了一套css预处理器，把编程的语法引入进来，然后美言之：less is more。
Sass更让人寻味的地方是它处理的是.scss文件。为什么不把后缀名改成.sass呢？
下面是Sass的网络资源：
现在，让我们开始Sass的旅途。
安装Sass
Sass最初是使用Ruby编程语言开发的，所以我们需要安装Ruby，访问http://www.ruby-lang.org/en/downloads/来下载。同时我们需要下载Ruby的包管理工具gem，访问https://rubygems.org/pages/download来进行下载。
之后，输入
$ gem install sass
使用Sass编译命令
当然我们想实时看到编译的效果，所以我们使用--watch命令。
$ sass --watch <存放.scss的文件夹>:css
这个命令启动Sass预处理器，寻找<存放.scss的文件夹>中所有扩展名为.scss的文件夹，任何改动的结果都会存放到css文件中。
如果想得到压缩的.css文件，操作是：
$ sass --watch <存放.scss的文件夹>:css --type compressed
使用Sass组织局部文件
通常，一个网站可能会要使用大量css，所以把所有css放在一个.css文件中是不方便开发者的。但如果将其分离成多个易于管理的小文件，则访客就要使用更多的时间请求来下载文件，所以这也是不建议的做法。
没错，Sass能兼顾这两个方面。比如，我们按照一定的逻辑，把Sass规则分成多个文件，然后，让Sass预处理器把这些文件编译成一个.css文件。是不是很棒。它是怎么做到的呢？
这些独立的文件，Sass称为局部文件，这种文件的名称和用法有特别之处，为了不让Sass预处理器把局部文件转换成单独的.css文件，局部文件的名称必须以下划线(_)开头。
有设计师提供了一种基本的Sass文件夹结构：
│ styles.scss #Sass主文件
│
├─helpers #特殊的Sass文件
│ _mixins.scss
│ _variables.scss
├─base #项目的基础文件
│ _grid.scss
│ _reset.scss
│ _typography.scss
│
├─layout #装饰页面各个区域的文件
| _footer.scss
| _forms.scss
| _header.scss
| _sidebar.scss
│
└─components #UI组件的文件
_buttons.scss
_dropdown.scss
_navigation.scss
由于文件中样式的顺序对层叠规则有影响，所以我们一般在styles.scss文件中这样引入：
@import 'helpers/variables';
@import 'helpers/mixins';
@import 'base/reset';
@import 'base/grid';
@import 'base/typography';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';
@import 'components/buttons';
@import 'components/dropdown';
@import 'components/navigtion';
因为
Sass处理局部文件超智能，所以我们可以省略后缀和_。
Sass变量
在Sass中，变量的名称以$开头。为变量赋值的方法是：在变量名后加英文:号。
/*variables of colors*/
$blue: #092B40;
$lightBlue: #85DEF2;
$water: #52A5D9;
$sky: #5BB5D9;
$orange: #D96F32;
当然，不止是颜色，你可以大胆发挥自己的想象。
有了变量之后，我们这样使用它。
html {
background-color: $blue;
}
变量之间的计算，也大胆地交给Sass来做吧。
嵌套选择符
在css中的后代选择器由多个选择器组成，来表示嵌套。如果你使用了Sass，就不必这么麻烦了。
举例：
.nav {
display:flex;
/*content*/
li {
width:30%;
/*content*/
}
a {
text-decoration:none;
/*content*/
}
}
上面的例子中，.nav样式中嵌套了li和a，其表现和后代选择器.nav li和.nav a是一致的。
注意伪元素
如果像创建的不是后代选择器，而是伪类，Sass同样有办法：就是在伪类前加上&符号。
a {
color:blue;
&:hover {
color:green;
}
}
上面的.scss编译成.css文件就是：
a {
color:blue;
}
a:hover {
color:green;
}
在这个过程中Sass把&符号直接替换成父辈选择器的名称。只是简单的替换而已，所以也有其他的用法可以发掘。
扩展
比如说，我们有多个选择器想应用同一种样式，当然，这些选择器不是父子的关系，否则我们直接用嵌套就好了。为了这个需求，Sass就引入了@extend指令。
h1 {
font-family: "Raleway",Arial,sans-serif;
color: #222;
}
h2 {
@extend h1;
border-top: 1px solid #444;
}
上面的.scss编译成.css文件就是：
h1, h2 {
font-family: "Raleway",Arial,sans-serif;
color: #222;
}
h2 {
border-top: 1px solid #444;
}
@extend指令可以放在任何位置，但我们一般放在其他属性之前，更容易显而易见。
使用占位符
@extend是霸道总裁，因为它不仅会扩展指定的选择器，还会扩展引用了那个选择器的其他样式。所以我们使用它的时候需要小心。
Sass引入%符号来解决这个问题，来用作其他样式基底的样式。
所以我们通常的做法是，用%表示一个基底样式，用作其他选择器的引入。
%btn {
display: inline-block;
padding: 1em;
border-radius: 3px;
}
.btn-order {
@extend %btn;
background-color: green;
color:white;
}
.btn-delete {
@extend %btn;
background-color: red;
color:white;
}
%btn{}当然是可以放在任何位置的。
上面的.scss编译成.css文件就是：
.btn, .btn-order, .btn-delete {
display: inline-block;
padding: 1em;
border-radius: 3px;
}
.btn-order {
@extend %btn;
background-color: green;
color:white;
}
.btn-delete {
@extend %btn;
background-color: red;
color:white;
}
这当然也是一个很棒的设计。
Mixin 混入
我的理解是，Mixin类似于Word里的宏指令，可以帮你执行很多操作的小型程序代码片段。一个很单纯的作用就是，我们编写css的时候，有些元素是需要提供厂商前缀的，如果你每个厂商前缀都敲出来，是不是很累。Mixin就可以帮你干这个事，利用可重用的代码来解放你的双手。
比如，我们经常需要使用厂商前缀的弹性盒。我们Mixin一段可重用的代码(也许不是这样称呼，但我喜欢)。
@mixin flex {
display: -webkit-flex;
display:flex;
}
这个代码片段其实跟变量一样，可以放在局部文件中。见上面的组织局部文件。
使用这个Mixin的方式是：在@include指令后写上混入的名称。
.container {
@include flex;
background-color:#444;
}
哦！厉害了。但是我们会这样去添加厂商前缀吗？当然不会，有人给我们做好这一切，比如autoprefixer。
但是，Mixin的厉害之处不仅仅于此。某种情况下，你甚至可以把Mixin看成一个函数。比如，我们像创建一个混入，让它接受四个字体属性。
@mixin text ($size:1em, &line-height:null, $weight:null, $color:null){
font-size: $size
line-height: $line-height;
font-weight: $weight;
color: $color;
}
/*使用这个Mixin*/
h1 {
@include text (1.25em,1.2,bold,#FF0000);
}
/*
*只想设置font-size 和 line-weight的值
*null即表示参数是可选的
* $size: 1em，则是为形参设定默认值*/
h2 {
@include text (1em,1.2);
}
/*我们只想明确font-size 和 color的值*/
h3 {
@include text (1em,$color:red);
}
此外，还可以为媒体查询提供Mixin，所以能用上混入的地方真是不胜枚举。