世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
兼容CSS
Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。
特性丰富
Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位。
成熟
Sass已经经过其核心团队超过8年的精心打造。
行业认可
一次又一次地，行业把Sass作为首选CSS扩展语言。
社区庞大
数家科技企业和成百上千名开发者为Sass提供支持。
框架
有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。
我是在vue脚手架中安装的
1 安装
npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass
2 配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置
{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] } // 不知道为什么我配置完就打包不了, 不配置就是好用的
3 在APP.vue中修改style标签
<style lang="scss">
4 使用
(1) 变量
1-1) 使用变量
sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)
1-2) 变量声明
$back: red #app color: $back // 变量声明也分为全局变量和局部变量 // 这样也是好用的 $highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; } //编译后 .selected { border: 1px solid #F90; }
1-3) 变量命名
在sass中使用-和_其实是一样的 例如$link-color和$link_color其实指向的是同一个变量。
$link-color: blue; a { color: $link_color; } //编译后 a { color: blue; }
(2) 嵌套css规则
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：
#content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }
像这种情况，sass可以让你只写一遍，且使样式可读性更高。在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。
#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE } } /* 编译后 */ #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }
(2-1) 父选择器的标识符&;
使用后代选择器和为了伪类的时候可能就是比较麻烦了 不知道怎么写。这个时候&就派上用场了
article a { color: blue; &:hover { color: red } } // 编译后 // 其实&相当于是父级 article a { color: blue } article a:hover { color: red }
(2-2) 群组选择器的嵌套;
在处理群组的时候只需要用,分割就好了,就能完美的解析不用内么麻烦
.container { h1, h2, h3 {margin-bottom: .8em} } <!--编译后--> .container h1 {margin-bottom: .8em} .container h2 {margin-bottom: .8em} .container h3 {margin-bottom: .8em}
这种也是一样的
nav, aside { a {color: blue} } //编译后 nav a, aside a {color: blue}
(2-3) 子组合选择器和同层组合选择器：>、+和~;
上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。
article { // 同层全体组合选择器 ~ article { border-top: 1px dashed #ccc } // 直接子元素 > section { background: #eee } dl > { dt { color: #333 } dd { color: #555 } } // 同层相邻组合选择器 nav + & { margin-top: 0 } }
(2-4) 嵌套属性;
在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中，你只需敲写一遍border：
nav { border: { style: solid; width: 1px; color: #ccc; } } // 编译后 nav { border-style: solid; border-width: 1px; border-color: #ccc; }
你甚至还可以这样写
nav { border: 1px solid #ccc { left: 0px; right: 0px; } } // 编译后 nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }
3 导入SASS文件;