css预处理器sass、scss

---

本文主要内容有三点：

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有变量作用域，即如果在选择器中声明了一个变量，那么该变量的作用范围就是这个选择器内部

对scss用法的简单记录^[3][4]

需先安装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;
}

参考文章

---

1. Less介绍及其与Sass的差异 ↩

2. SCSS 与 Sass 异同 ↩

3. Sass中文网--快速入门 ↩

4. Sass中文网--中文文档 ↩