什么是SASS？
SASS(Syntactically Awesome Stylesheets)是一种动态样式语言，为CSS融入了编程元素，提供了很多便利的写法，使得CSS的开发变得简单、可维护。先来回顾一下CSS，接触过WEB开发的同学，肯定都了解CSS（级联样式表）。通常，我们使用CSS定义页面需要的样式规则，然后为页面中的目标元素设置或者更改样式。作为一种样式表语言，CSS旨在方便的分离设计和内容展现，便于我们去维护页面的样式。
然而对于大部分编程人员来说，写css样式往往是一件非常痛苦的事情。他们会感觉到各种约束，为什么我不能定一个变量来避免那些类似“变量”的重复书写？为什么我不能继承上个class的样式定义？...SASS正是帮编程人员解开了这些疑惑，让css看起来更像是一门编程语言。
sass-logo-wall.jpg
到底是SASS还是SCSS？
SASS最初的语法规则是缩进语法，它没有括号、分号、使用两个空格缩进来定义代码的嵌套方式，该语法形式的文件以 .sass 为后缀名。
然而SASS的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到SASS里面，因此SASS语法进行了改良，SASS 3就变成了SASS(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进，文件以 .scss 为后缀名。
So，到底是用SASS还是SCSS，各位同学依个人口味酌量添加~
安装
SASS基于Ruby语言开发而成，因此安装SASS前需要安装Ruby。ruby安装完成后，我们就可以安装SASS了，命令如下：
gem install sass
安装完后，验证下是否安装成功，我们继续输入如下命令：
sass -v
如安装成功后，会显示当前SASS的版本号：
Sass 3.x.x (Selective Steve)
常用命令
无论是SASS还是SCSS都支持CSS的写法，个人还是习惯SCSS的语法规则。
将SCSS文件转译成CSS文件，命令如下：
sass base.scss base.css
SASS提供四种编译风格：
nested：嵌套缩进的css代码（默认）；
expanded：没有缩进的、扩展的css代码；
compact：简洁格式的css代码；
compressed：压缩后的css代码；
生产环境当中，一般使用最后一个选项，例：
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// 监听一个SASS文件sass --watch input.scss:output.css// 监听文件夹下面的SASS文件sass --watch app/sass:public/stylesheets
更多命令可参考SASS的帮助选项，命令行内输入sass -h即可。
基本语法规则
变量
SASS要求变量需要以$开头声明，如下：
// 定义变量$var : left;
div { float : $var;
}
// 编译后
div { float : left;
}变量名中不区分下划线和中划线，如：
// 变量名中含有下划线或中划线$margin-left : 20px;
div {
margin-left : $margin_left;
}// 编译后div {
margin-left : 20px;
}字符串中引用变量，需要用#{}将变量包起来引用，如下：
// 字符串中引用变量$right : 20;
.mr-#{$right} {
margin-right : #{$right}px;}// 编译后.mr-20 {
margin-right : 20px;
}注释
SASS共有两种注释风格：
标准的CSS注释 /* comment */ ，会保留到编译后的文件；
单行注释 // comment，只保留在SASS源文件中，编译后被省略；
嵌套
我们之前在维护CSS文件的时候，一定遇到过这种情况。当我们写后代选择器时，需要指定父选择器，同样的父选择器会重复写好多次，比如：
#content article h1 { color : #333 }#content article p { margin-bottom : 1.4em }#content aside { background-color : #EEE }
...在SASS里面支持嵌套的方式，规避了上述问题，并且提高了代码的可读性，上例中代码可以在SASS中定义如下：
// 嵌套CSS规则#content {
article {
h1 {
color : #333;
}
p {
margin-bottom : 1.4em;
}
}
aside {
background-color : #EEE;
}
}在嵌套规则中，我们可以用&来表示父选择器的引用，往往在一些伪类样式中会用到，例如：
// 父选择器标识符article a {
color : blue;
&:hover { color : red }
}// 编译后article a {
color : blue;
}
article a : hover {
color : red;
}除了选择器的嵌套，SASS中还支持属性的嵌套，如下：
// 属性嵌套nav {
border : 1px solid #ccc {
left : 0px;
right : 0px;
}
}// 编译后nav {
border : 1px solid #ccc;
border-left : 0px;
border-right : 0px;
}@import 导入
@import命令，用来导入外部文件：
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令：
@import "foo.css";
混合器
SASS中还提供一种混合器（mixin），它可以帮我们规避大段样式的重用，混合器通过@mixin标识声明，示例如下：
// 混合器示例@mixin rounded-corners {
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
}
notice {
background-color : green;
border : 2px solid #00aa00;
@include rounded-corners;
}// 编译后.notice {
background-color : green;
border : 2px solid #00aa00;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
}混合器支持我们传入自定义参数和设置默认参数，当设置默认参数时使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，例：
// 带参数的混合器@mixin link-colors (
$normal,
$hover: $normal,
$visited: $normal
) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(red);
}// 编译后a {
color: red;
&:hover { color: red; }
&:visited { color: red; }
}@extend 继承
SASS中支持选择器的继承，通过@extend关键字实现，例如：
// 选择器的继承.class1 {
background-color : #fff;}
.class2 {
@extend .class1;
color : black;
}// 编译后.class1 {
background-color : #fff;}
.class2 {
background-color : #fff;
color : black;
}通过继承的实现，往往可以精简我们的css文件。
条件分支
@if可以用来判断：
p {
@if 1 + 1 == 2 { border : 1px solid; }
@if 5 < 3 { border : 2px dotted; }
}// 编译后p {
border : 1px solid;
}同时还支持@else命令：
body {
@if 1 > 0 {
background-color : #000;
} @else {
background-color : #fff;}// 编译后body {
background-color : #000;}循环
SASS支持for循环和while循环：
// for循环@for $i from 1 to 3 {
.border-#{$i} { border: #{$i}px solid blue; }
}// while循环$i : 1;
@while $i < 3 {
.border-#{$i} { border: #{$i}px solid blue; }
$i: $i + 1;
}// 编译后.border-1 {
border: 1px solid blue;
}
.border-2 {
border: 2px solid blue;
}
.border-3 {
border: 3px solid blue;
}each命令用来遍历指定参数集合：
@each $member in a, b, c {
.#{$member} { background-image: url("/image/#{$member}.jpg");
}
}
// 编译后
.a {
background-image: url("/image/a.jpg");
}
.b {
background-image: url("/image/b.jpg");
}
.c {
background-image: url("/image/c.jpg");
}自定义函数
SASS允许用户编写自定义函数，用@function声明，可以传递参数或者设置默认参数，@return返回处理结果：
// 自定义函数@function double($n:5px) {
@return $n * 2;
}#sidebar { width: double();
}// 编译后#sidebar { width: 10px;
}参考
http://www.sass.hk/sass-course.html
http://www.ruanyifeng.com/blog/2012/06/sass.html
作者：桂圆_noble
链接：https://www.jianshu.com/p/a9b5e3e84222
随时随地看视频
