今天就让我们来学习什么是Sass？？？

为何有 Sass

作为前端开发人员对于 CSS 应该不陌生吧，大多数前端开发对 CSS 都是既爱又恨，爱它可以通过简单的代码使页面美化，恨他是因为随着项目的复杂性越高，它的可维护性就越差。作为开发人员，CSS 更像是一门设计类语言而非开发类语言。比如：

• 缺少模块化机制
• 缺少变量机制，使得滋生很多重复的代码
• 嵌套层级写法非常痛苦
• 复用困难

因此，有需求就会有市场，Sass 因此应运而生。

Sass 是世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言！

从官方的解释不难看出，Sass 是一门 CSS 的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。（这里还可以去了解下 CSS 预处理技术~）

接下来就简单介绍下 Sass 的基本使用~

变量机制

Sass 允许是用变量，所有变量以 $ 开头。如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中。

$main-color: #333;
$side: left;

.div1 {
background: $main-color;
border-#{$side}-radius: 5px;
}
.div2 {
background: $main-color;
}

使用变量定义的好处显而易见，一是可以把调用频繁的变量属性放置单一文件夹，方便多人协调开发，二是便于统一项目样式风格。

嵌套写法

没有嵌套写法应该是 CSS 最蛋疼的点了，来看看之前是怎么写 CSS 的：

.container .content .left-side .name {
font-size: 20px;
}
.container .content .left-side .age {
font-size: 14px;
}

有了 Sass 之后这就变得很简单了，避免了大量重复的选择器：

.container {
.content {
.left-side {
.name {
font-size: 20px;
}
.age {
font-size: 14px;
}
}
}
}

模块机制

CSS 中有定义一个模块化 @import 规则，不过因为其需要执行到才会去下载所需代码，实际使用时会引起页面卡顿。Scss 对其进行了扩展，允许其导入 Scss 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令（mixin）都可以在导入的文件中使用。

@import "common";
@import "popup";
@import "module_a";

@import 使得开发时 CSS 和 html 完全分离，通过一个文件引入 CSS 即可，修改样式也不需要修改到 html 文件，项目也不会随着业务复杂度增加而变得更加复杂，只需要增加、修改、删除对应功能模块就行。

Mixin

Sass 提供了一种混合指令，可以将公共样式片段抽离放在单独文件中，便于多处复用。

在没有 Sass 前我们部分 CSS 是这样的：

.div1 {
background: red;
border: 1px solid #333;
border-radius: 2px;
}
.div2 {
background: blue;
border: 1px solid #333;
border-radius: 2px;
}

如果想抽离公共样式片段只能这样做：

.div1,
.div2 {
border: 1px solid #333;
border-radius: 2px;
}
.div1 {...}
.div2 {...}

这种写法每次想重复利用该样式片段都得在其后面加上选择器，而且相同选择器有不同的样式片段，随着项目复杂度增强，其维护成本极高。（如果想再优化写法，可以将公共部分抽成一个新的类，但会增加类名复杂度）

有了 Sass 的 @mixin 之后就简单了许多：

@mixin grey-border-radius {
border: 1px solid #333;
border-radius: 2px;
}
.div1 {
@include grey-border-radius;
background: red;
}

不仅如此，@mixin 还可以指定参数：

@mixin ml($value: 10px) {
float: left;
margin-left: $value;
}
.div1 {
@include ml(20px);
}

继承机制

Sass 还提供了继承机制，允许一个选择器继承另一个选择器。

假如有一个消息框，除了基础样式外，其还有成功和失败样式，用 CSS 写法是这样的：

.msg {
border: 1px solid #e3e3e3;
background: #dff0d8;
}
.msg-success {
color: #4cae4c;
}
.msg-error {
color: #d43f3a;
}

如果以上定义样式，需要在每个标签都多加一个 .msg 的类名，使用 Sass 继承机制后：

.msg {
border: 1px solid #e3e3e3;
background: #dff0d8;
}
.msg-success {
@extend .msg;
color: #4cae4c;
}
.msg-error {
@extend .msg;
color: #d43f3a;
}

其编译后：

.msg, .msg-success, .msg-error {
border: 1px solid #e3e3e3;
background: #dff0d8;
}
.msg-success {
color: #4cae4c;
}
.msg-error {
color: #d43f3a;
}

不难看出其实也可以用 @mixin
实现相同的效果，但不同的是：继承拷贝的是选择器，而混合拷贝的是样式片段。关于两者之间如何选择官方文档也有说明，详细戳这里。

自定义函数

Sass 提供的函数和 JS 的函数差不多，主要用于一些计算或者结合控制语句使用。

比如移动端开发时可以封装成一个函数用于把 px 转成 rem：

$baseFontSize: 20;
@function px2rem($val) {
@return $val/$baseFontSize + rem;
}

.big-text{
font-size: px2rem(30);
}

小结

本文主要阐述了 Sass 基本的入门用法，用于日常开发足矣。如果想更加深入了解 Sass 的高级用法，可以参考 Sass官方中文文档。