一、什么是sass
css预处理器，它的基本思想是：用一种专门的编程语言，进行网页样式设计，然后再编译成正常的css文件。
二、sass基本用法
变量：以$开头
$font-primary: "Microsoft YaHei","微软雅黑",sans-serif;
body{
font-family: $font-primary;
}
如果变量需要嵌套在字符串中，就必须写在#{}中
$side: left;
.mydiv{
border-#{$side}-radius: 10px;
}
计算功能
sass可进行简单的加减乘除
.layout{ width: 100%; }
.layoutRight{
float: right;
width: 600px / 960px * 100%;
}
.layoutLeft{
float: left;
width: 300px / 960px * 100%;
}
嵌套
选择器的嵌套，表示层级关系，使代码看起来整洁优雅
nav{
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
display: inline-block;
}
}
属性也可以嵌套
p{
border:{
color: red;
}
}
在嵌套中使用&表示：引用父元素
a{
&:hover{
color: #333;
}
}
注释
- 标准的css注释： /* commit */，会保留到编译后的文件
- 单行注释： //commit，只保留在sass源文件中，编译后省略
- 在/*后加感叹号,表示“重要注释”，即使压缩模式编译，也会被保留，通常用于声明版权信息
/*!
重要注释
*/
三、代码的重用
导入
sass中导入其他sass文件，最后编译为一个css文件，优于纯css的@import
ul{margin: 0; padding: 0;} //单独的reset.scss文件
@import "reset"; //将reset.scss导入base.css文件
body{
font-size: 20px;
}
%=>placeholder
placeholder,如果你不用@extend去使用，它不会被编译成css
%cjj{
display: block;
color: red;
}
span{
@extend %cjj;
}
mixin
使用@mixin命令，定义一个代码块，使用@include调用mixin，它可以指定参数和缺省值
@mixin max-screen($result){
@media screen and(max-width: $result){
@content;
}
}
使用：
@include max-screen(1200px){
body{ width: 1100px; }
}
@include max-screen(480px){
body{ width: 900px; }
}
生成浏览器前缀实例：
@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);
}
/* 如果mixin和%同时使用，placeholder会提升到头部声明 */
继承/扩展
sass允许一个选择器继承另一个选择器
.mydiv1{
border: 1px solid #ddd;
}
.mydiv2{
@extend .mydiv1;
color: lime;
}
颜色函数
sass提供一些内置的颜色函数，以便生成系列颜色
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
四、 自定义函数
sass允许用户编写自己的函数
@function cjj($n){
@return $n * 2;
}
#side{
width: cjj(10px);
}
参考文献：sass入门指南，sass用法指南-阮一峰