本文主要内容有三点：
1. sass和less 的区别
2. sass和scss的关系
3. scss的简单语法
sass和less：
sass是基于ruby，在服务器端处理完成；less是基于JS（在html中引入项目的.less文件和less的js文件），在客户端输出修改过的css到浏览器。
- 调用less样式表时，link标签的rel属性一定是“stylesheet/less”，其中“/less”不可缺少
- less.js脚本只能放在加载less样式的link后面，才能生效[1]
sass和scss:
css预处理器scss是sass 3引入的新语法，语法完全兼容css3 并且继承了sass的强大功能。与sass比较明显的不同在于格式，scss用花括号和分号分隔，sass用回车和缩进分隔；还有其他嵌套选择器（Nested Selectors）、嵌套属性（Nested Properties）、宏定义（Mixins）、注释（Comments）、引用文件（@import）这些方面存在不同[2]
注意: sass有变量作用域，即如果在选择器中声明了一个变量，那么该变量的作用范围就是这个选择器内部
需先安装ruby环境，搭配gulp使用根据语法不同可以选择gulp-ruby-sass或gulp-scss
$ 定义变量（可以定义数字、字符串、颜色值、null、数组、map）
$rootFontSize: 20;
@定义函数
@function px2Rem($p) {
$unit: 1rem;
@return ($p/$rootFontSize)*$unit;
}
.content-box {
padding: px2Rem(30) px2Rem(15);
}
// 编译后 ↓
.content-box {
padding: 1.5rem 0.75rem;
}
@import 导入scss文件
文件内容直接写进来
@mixin 混合器，定义大段重用代码（展示性，可传参）
@include 使用混合器，将混合器中的所有样式提取出来 放在@include所在的样式内
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
// 编译后 ↓
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
@extend 选择器继承样式（语义性）
.desc { color: #333;}
.detail-desc {
font-weight: 400;
@extend .desc;
}
// 编译后 ↓
.text-black, .detail-desc { color: #333;}
.detail-desc {
font-weight: 400;
}
