测试4
测试大礼包
爬虫实战特训课

Sass 简介

1. 前言

这个专题的文章我将带大家从零开始学习 Sass。在目前的企业级应用前端开发中，会大量地应用到 Sass 。那什么是 Sass 呢？Sass 有哪些特性？ Sass 有哪些优点？在开发中我们为什么要使用它？怎么用它？接下来将开始我们的 Sass 之旅，让它在你的开发中大放异彩～

2. 什么是 Sass？

在说 Sass 之前不得不说到 CSS，相信你在看这篇文章之时一定是了解 CSS 的，以前的前端开发中我们一般是通过 CSS 来编写样式，而在现代化的前端开发中我们大多数企业中都在使用 Sass 来编写样式。那什么是 Sass 呢？我们引用 Sass 官网的一段话：

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. — 官网

这段话中最关键的一处 CSS extension language , 翻译过来就是 CSS 扩展语言，这段话的总体意思就是说 Sass 是一个稳定的、强大的、专业级的 CSS 扩展语言。所以说，它是基于 CSS 扩展出来的，也有另一个叫法，Sass 是一个 CSS 预处理器，所以说 Sass 是需要编译后转换为 CSS 的，它一定是在你的项目编译时去做处理，而不是在运行时，了解这一点很重要！

3. 为什么要使用 Sass？

CSS 已经可以满足我们编写各种样式，我们为什么又要使用它的扩展语言 Sass 呢？很重要的原因就是提高开发效率和提高代码可维护性！在大型的 web 应用开发中我们一般会编写大量的样式代码，Sass 在 CSS 的基础上提供了变量、嵌套 (nesting)、混合 (mixins) 、函数、指令等功能，使得我们可以更高效地编写样式，同时你还可以像编写 JS 一样来灵活地控制你的样式代码，这给 CSS 的开发带来了极大的便利！

3.1 Sass 初体验

在此我们先体验一下 Sass 中的嵌套，首先我先用 CSS 来写一段代码：


.first {
  color: red;
}
.first .two {
  color: blue;
}
.first .two .three {
  color:green;
}

可以看到类似上面这种的 CSS 代码应该是项目中比较常见的，我们通过父选择器一层一层的去编写子元素的样式，重复的编写父选择器，那如果是使用 Sass 可以怎样写呢？请看如下代码：

.first {
  color:red;
  .two {
    color:blue;
    .three {
       color:green;
     }
   }
}

这么写起来是不是很爽～你可以嵌套着去编写，而不需要每次都将父级选择器给写上，同时也比较便于维护。这仅仅是 Sass 提供的一个小扩展，这里只做一个简单的演示，后面将逐一对 Sass 提供的各种功能进行详细讲解。

3.2 几种 CSS 预处理语言的对比

CSS 的预处理语言不是只有 Sass，目前市面上有很多种，比如 less、Stylus、Turbine、Swithch CSS 等等，目前比较主流的就是 Sass、less、Stylus ，那么 Sass 相较于其他的几种有什么优缺点呢？

我认为 Sass 最大的优势在于它诞生的比较早，比较成熟，同时还有 ruby 社区的良好支持以及 Compass 这个强大的工具库；还有就是它更好的支持条件语句，是我们熟知的 if else 的写法，整体来说功能比较强大，热度比较高。

而 Sass 最大的一个痛点我认为就是安装过于繁琐，Sass 的安装需要 Ruby 环境，所以在安装上步骤稍多了些，同时在国内使用 npm 安装的时候也确实是慢的可以，你可能需要将 npm 镜像源切换为淘宝源，后面会详细介绍。

总的来说，选择 Sass 作为 CSS 预处理语言的入门还是比较容易的，另外还要考虑到企业中前端技术团队对技术栈的需求，可能有的团队使用 Sass，有的团队使用其他。

4. Sass 的版本说明

本教程编写时使用的 Sass 版本为 v3.x.x 版本，node-sass 版本为 v4.x.x 版本 Sass 直到目前为止一共发布了 300 多个版本。

Sass 的新版本会尽可能向前兼容，但有时需要进行突破性的更改。同时 Sass 需要跟上不断发展的 CSS 规范，旧的语言设计错误偶尔需要修正。在每一个突破性的更改发布之前，Sass 实现将为其行为将发生更改的样式表生成弃用警告。

5. 学习基础

学习这门课程一定需要有 CSS 基础，如果您还不了解 CSS，那么请先学习 CSS 的课程，有了 CSS 基础后再使用 Sass 才会展现它的 "威力"！