Sass 基础教程——基本介绍

Posted 2022-10-12 feelang

本篇是 Sass 教程的入门篇，主要讲述 Sass 的诞生背景以及它如何提高我们的开发效率
学习 Sass 需要有一定的 CSS 知识，对 CSS 不熟悉的同学可参考我之前写的系列教程：

• CSS入门篇
• CSS进阶篇
• CSS高级篇

Sass 是什么

简单来说，Sass 是一种 CSS 的扩展语言，也是一个预处理器，它让 CSS 变得更加容易维护和编写。

Sass 还是一个脚本语言，经过转译（tranpilation），生成浏览器可识别的 CSS 代码。

除了 Sass，类似的脚本语言还有 Less 和 Stylus，它们都是为了解决 CSS 的缺陷而生的。

Sass 最早可以追溯到 2006 年，全称是 Syntactically Awesome Stylesheets，作者是 Hampton Lintorn-Catlin，他把变量、循环等脚本语言的特性带进了 CSS 世界，有效提高了 CSS 的编码效率。

Sass 有哪些优势

虽然最新的 CSS3 已经更新了很多特性，但在许多方面仍然落后于 Sass。

而 Sass 犹如一把瑞士军刀，多年来经久不衰，它的优势到底有哪些呢？

• Sass 可以把一个大的样式文件（style sheet file）拆解成更小、更容易维护的小文件，然后再通过工具聚合成大文件，在不改变最终结果的情况下，让 CSS 拥有了模块化能力
• 同时，Sass 的 @import 指令可以有效减少网页的 HTTP 请求量，提高页面性能，因为传统开发模式下，为了兼容不同浏览器，一个页面内往往会加载多个 CSS 文件，每一个文件都会带来一次额外的请求开销，而Sass 的 @import 指令可以将多个小文件整合成一个大文件，有效减少了 HTTP 请求
• 更重要的是，Sass 为我们打破了编写重复性代码的枷锁，它可以直接扩展已有样式，也可以通过继承基础样式来创建新的样式
• 而且，Sass 完全兼容 CSS，也就是说，Sass 预处理时会完全忽略掉 CSS 规则，这就使得老 CSS 代码可以直接拿来用，根本没必要进行大的重构
• 除此之外，Sass 还可以定义变量，彻底让我们告别了魔法数字（magic number），那些会在多个地方会用到的值，可以只用一个变量来表示，当变量值发生变化时，用到变量的地方就会更新为变量的最新值

下面通过一个例子来看一下它的具体用法：

$purple: #6A67CE;
$orange: #FF9100;

.purple-btn 
	text-align: center;
	background-color: $purple;

.purple-text 
	color: $purple;

代码前两行定义的 $purple 和 $orange 就是我们上面提到的变量，这两个变量分别用在了 purple-btn 和 purple-text 两个类选择器中。

如果我们直接用 CSS 来定义上述样式，代码就会变成这样：

.purple-btn  
    text-align: center; 
    background-color: #6A67CE; 


.purple-btn:hover  
    background-color: #5653BD; 

很显然，这种方式难以维护，因为如果将来要改变色值，那么很多地方都要随之改动。

其实，Sass 不止一种写法，上例代码用了目前比较流行的那种。

Sass 的两种语法

Sass 有两种常见语法：

• 第一种类似 Haml 脚本语言，利用缩进来区分代码区块（block），利用换行来区分样式规则，文件后缀名为 .sass
• 第二种和 CSS 语法差不多，叫 SCSS (Sassy CSS)，利用大括号定义代码区块（bloc），用分号定义代码行（line），文件后缀是 .scss

Sass 的作者是 Hampton Lintorn-Catlin，也是 Haml 的作者
Scss 由 Henry Thornton 设计，由 Henry Thornton 开发

下面我们通过一个例子展示一下两者的不同之处。

首先，一段用 Sass 语法写成的代码如下所示：

nav
    ul
	    margin: 0
	    padding: 0
	    list-style: none
    li
	    display: inline-block
    a
	    display: block
	    padding: 6px 12px
	    text-decoration: none	

对应的 scss 版本如下：

nav 
    ul 
	    margin: 0;
	    padding: 0;
	    list-style: none;
    
    li 
	    display: inline-block;
    
    a 
	    display: block;
	    padding: 6px 12px;
	    text-decoration: none;
    

无论是 Sass 还是 SCSS，经过转译，都会产出如下 CSS 代码：

nav ul 
    margin: 0;
    padding: 0;
    list-style: none;

nav li 
    display: inline-block;

nav a 
    display: block;
    padding: 6px 12px;
    text-decoration: none;

除此之外，Sass 还有其他语言版本的语法，比如 C、php 和 Java 等，但是它们并不常用，了解即可。后续教程我们将使用第二种来讲解 Sass 用法。

一开始我们提到过，Sass 作为 CSS 的超集，不能直接被浏览器识别，必须要转译成 CSS，这个转译（transpilation）的过程最早用 Ruby 实现，后来因为性能问题已经停止维护，现在最常用的是 Dart 重写的版本——Dart Sass。

Dart Sass

Dart 这门语言比较小众，我 2015 年刚接触时，写过一篇介绍性的博客 Dart是一个怎样的语言？，后来便没有跟进，直到前年 Flutter 大火，Dart 又重新回到了人们的视野。

Dart 的优势在于它的 VM 性能极佳，Google 当年意在用它取代 javascript，只不过 ES6 过于优秀，显得 Dart 只是昙花一现，其实 Dart 一直默默无闻地向前发展着。

Dart 版本的 Sass，无论从性能还是易用性上都高出一筹，下一篇我们将介绍 Dart Sass 的安装以及它的基础用法。