Sass 是成熟、稳定、强大的 CSS 扩展语言。sass是需要编译的，sass不能直接用于页面。它可以提高编程效率（对于使用熟练的人来说）。
sass想要应用在项目中需要编译成css文件。用考拉！
sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。
参考链接：
Sass中文网：https://www.sass.hk/
中文文档：http://sass.bootcss.com/
一、变量
sass中可以定义变量，可以统一维护。sass定义变量用$开头
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
body {
font-family: $fontStack;
color: $primaryColor;
}
//编译成css style//-----------------------------------body {
font-family: Helvetica, sans-serif;
color: #333;
复杂变量的使用
//sass style//-------------------------------
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css style//-------------------------------a{
color:#08c;
}
a:hover{
color:#333;
}
二、嵌套
sass可以进行选择器的嵌套，表示层级关系，看起来很有bigger整齐。
/sass style//-----------------------------------nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
//css style//-----------------------------------nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
三、mixin（混合）
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。
//sass style//-----------------------------------@mixin box-sizing ($sizing) {
-webkit-box-sizing:$sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
//css style//-----------------------------------.box-border {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
四、扩展/继承
sass可通过@extend来实现代码组合声明，使代码更加优越简洁。
//sass style//-----------------------------------.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
//css style//-----------------------------------.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
颜色
sass中集成了大量的颜色函数，让变换颜色更加简单。
//sass style//-----------------------------------
$linkColor: #08c;a {
text-decoration:none;
color:$linkColor;
&:hover{
color:darken($linkColor,10%);
}
}
//css style//-----------------------------------a {
text-decoration: none;
color: #0088cc;
}
a:hover {
color: #006699;
}
原文作者：祈澈姑娘；原回答：https://www.zhihu.com/question/61624754/answer/540792492：90后前端妹子，爱编程，爱运营，爱折腾。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
