一、什么是Sass/Scss.
Sass和Scss是指的是同一个东西。Sass的语法更近ruby，而Scss更接近css代码。Sass/Scss是对css的扩展，但是scss/sass不能之间直接运行在浏览器中，需要编译成css.
二、在命令行中安装Sass和使用
首先需要在电脑上安装node.然后使用npm安装Sass.
npm install -g sass
常用的命令
sass main.scss main.css sass --watch main.scss:main.css
三、Sass的语法
a、nesting(嵌套)
#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } 编译后：
#main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } 属性嵌套：
.container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex:{ direction: column; wrap: nowrap; } align-items: center; padding: 3rem 0; box-sizing: border-box; } 编译后：
.container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding: 3rem 0; box-sizing: border-box; } 伪类选择器的嵌套：
b、Variables(变量)
变量名字需要以$符号开始。
$main-color:#521751; .sass-introduction { border: 0.05rem solid $main-color; background: #fae5ff; padding: 2rem; text-align: center; box-shadow: 0.2rem 0.2rem 0.1rem #ccc; width: 90%; box-sizing: border-box; } 编译后：
.sass-introduction { border: 0.05rem solid #521751; background: #fae5ff; padding: 2rem; text-align: center; box-shadow: 0.2rem 0.2rem 0.1rem #ccc; width: 90%; box-sizing: border-box; } 变量表示list
$border-default:0.05rem solid $main-color; $font-default:Arial, sans-serif; body { font-family: $font-default; margin: 0; } .sass-introduction { border: $border-default; background: #fae5ff; padding: 2rem; text-align: center; box-shadow: 0.2rem 0.2rem 0.1rem #ccc; width: 90%; box-sizing: border-box; } 变量表示map
$colors: (main : #521751,secondary : #fa923f); .documentation-links .documentation-link { text-decoration: none; color: map-get($colors,main); display: block; padding: 0.2rem; } 编译后
.documentation-links .documentation-link { text-decoration: none; color: #521751; display: block; padding: 0.2rem; }