Sass 是成熟、稳定、强大的 CSS 扩展语言。sass是需要编译的，sass不能直接用于页面。它可以提高编程效率（对于使用熟练的人来说）。
sass想要应用在项目中需要编译成css文件。用考拉！
sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。
一、变量
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; }
