章节索引 :

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 才会展现它的 "威力"!