[Sass] 预处理器介绍

预处理器介绍

预处理器基本介绍
Sass 快速入门

预处理器基本介绍

平时在工作的时候，经常会面临这样的情况：需要书写很多的样式代码，特别是面对比较大的项目的时候，代码量会急剧提升，普通的CSS书写方式不方便维护以及扩展还有复用。

通过 CSS 预处理技术就可以解决上述的问题。基于预处理技术的语言，我们可以称之为 CSS 预处理语言，该语言会为你提供一套增强语法，我们在书写 CSS 的时候就使用增强语法来书写，书写完毕后通过预处理技术编译为普通的 CSS 语言即可。

CSS预处理器的出现，解决了如下的问题：

代码组织：通过嵌套、模块化和文件引入等功能，使 CSS 代码结构更加清晰，便于管理和维护。
变量和函数：支持自定义变量和函数，增强代码的可重用性和一致性。
代码简洁：通过简洁的语法结构和内置函数，减少代码冗余，提高开发效率。
易于扩展：可以通过插件系统扩展预处理器的功能，方便地添加新特性。

目前前端领域常见的 CSS 预处理器有三个：

Sass
Less
Stylus

下面我们对这三个 CSS 预处理器做一个简单的介绍。

Sass

Sass是最早出现的 CSS 预处理器，出现的时间为 2006 年，该预处理器有两种语法格式：

缩进式语法（2006 年）

$primary-color: #4CAF50

.container
	background-color: $primary-color
	padding: 20px

  .title
    font-size: 24px
    color: white

类CSS语法（2009年）

$primary-color: #4CAF50;

.container {
  background-color: $primary-color;
  padding: 20px;

  .title {
    font-size: 24px;
    color: white;
  }
}

Sass 提供了很多丰富的功能，例如有声明变量、嵌套、混合、继承、函数等，另外 Sass 还有强大的社区支持以及丰富的插件资源，因此 Sass 比较适合大型项目以及团队协作。

Less：Less 也是一个比较流行的 CSS 预处理器，该预处理器是在 2009 年出现的，该预处理器借鉴了 Sass 的长处，并在此基础上兼容 CSS 语法，让开发者开发起来更加的得心应手

@primary-color: #4CAF50;
    
.container {
  background-color: @primary-color;
  padding: 20px;

  .title {
    font-size: 24px;
    color: white;
  }
}

早期的 Sass 一开始只有缩进式语法，所以 Less 的出现降低了开发者的学习成本，因为 Less 兼容原生 CSS 语法，相较于 Sass，Less 学习曲线平滑、语法简单，但是编程功能相比 Sass 要弱一些，并且插件和社区也没有 Sass 那么强大，Less 的出现反而让 Sass 出现了第二版语法（类CSS语法）

Stylus：Stylus 是一种灵活且强大的 CSS 预处理器，其语法非常简洁，具有很高的自定义性。Stylus 支持多种语法风格，包括缩进式和类 CSS 语法。Stylus 提供了丰富的功能，如变量、嵌套、混合、条件语句、循环等。相较于 Sass 和 Less，Stylus 的社区规模较小，但仍有不少开发者喜欢其简洁灵活的特点。

primary-color = #4CAF50

.container
  background-color primary-color
  padding 20px

  .title
    font-size 24px
    color white

Sass快速入门

Sass 最早是由 Hampton Catlin 于 2006 年开发的，并且于 2007 年首次发布。

在最初的时候， Sass 采用的是缩进敏感语法，文件的扩展名为 .sass，编写完毕之后，需要通过基于 ruby 的 ruby sass 的编译器编译为普通的 CSS。因此在最早期的时候，如果你想要使用 sass，你是需要安装 Ruby 环境。

为什么早期选择了采用 Ruby 呢？这和当时的 Web 开发大环境有关系，在 2006 - 2010 左右，当时 Web 服务器端开发就特别流行使用基于 Ruby 的 Web 框架 Ruby on Rails。像早期的 github、Twitter 一开始都是使用的 ruby。

到了 2009 年的时候， Less 的出现给 Sass 带来竞争压力，因为 Less 是基于原生 CSS 语法进行扩展，使用者没有什么学习压力，于是 Natalie Weizenbaum 和 Chris Eppstein 为 Sass 引入了新的类 CSS 语法，也是基于原生的 CSS 进行语法扩展，文件的后缀名为 scss。虽然文件的后缀以及语法更新了，但是功能上面仍然支持之前 sass 所支持的所有功能，加上 sass 本身插件以及社区就比 less 强大，因此 Sass 重新变为了主流。

接下来还需要说一下关于编译器。随着社区的发展和技术的进步，Sass 已经不在局限于 Ruby，目前已经有多种语言实现了 Sass 的编译器：

Dart Sass：由 Sass 官方团队维护，使用 Dart 语言编写。它是目前推荐的 Sass 编译器，因为它是最新的、功能最全的实现。

GitHub 仓库：https://github.com/sass/dart-sass
LibSass：使用 C/C++ 编写的 Sass 编译器，它的性能优于 Ruby 版本。LibSass 有多个绑定，例如 Node Sass（ Node.js 绑定）和 SassC（C 绑定）。

GitHub 仓库：https://github.com/sass/libsass
Ruby Sass：最早的 Ruby 实现，已被官方废弃，并建议迁移到 Dart Sass。

官方推荐使用 Dart Sass 来作为 Sass 的编译器，并且在 npm 上面发布了 Dart Sass 的包，直接通过 npm 安装即可。

接下来我们来看一个 Sass 的快速上手示例，首先创建一个新的项目目录 sass-demo，使用 pnpm init 进行项目初始化，之后安装 sass 依赖：

pnpm add sass -D

接下来在 src/index.scss 里面写入如下的 scss 代码：

$primary-color: #4caf50;

.container {
    background-color: $primary-color;
    padding: 20px;

    .title {
        font-size: 24px;
        color: white;
    }
}

接下来我们就会遇到第一个问题，编译。

这里我们就可以使用 sass 提供的 compile 方法进行编译。在 src 目录下面创建一个 index.js 文件，记入如下的代码：

// 读取 scss 文件
// 调用 sass 依赖提供的 complie 进行文件的编译
// 最终在 dist 目录下面新生成一个 index.css（编译后的文件）

const sass = require('sass'); // 做 scss 文件编译的
const path = require('path'); // 处理路径相关的
const fs = require('fs'); // 处理文件读写相关的

// 定义一下输入和输出的文件路径
const scssPath = path.resolve("src", "index.scss");
const cssDir = "dist"; // 之后编译的 index.css 要存储的目录名
const cssPath = path.resolve(cssDir, "index.css");

// 编译
const result = sass.compile(scssPath);
console.log(result.css);

// 将编译后的字符串写入到文件里面
if(!fs.existsSync(cssDir)){
    // 说明不存在，那就创建
    fs.mkdirSync(cssDir);
}

fs.writeFileSync(cssPath, result.css);