SASS 与 CSS 之间的差异及转换工具介绍
作为前端开发人员，我们都知道 CSS 是网页样式设计的主要语言。然而，伴随着前端技术的发展，出现了一种新型的样式语言：SASS。SASS 是 CSS 的超集，也就是说 SASS 极大地扩展了 CSS 的功能，并同时提供了一些便捷的语法及工具。今天我们就来深入探讨 SASS 与 CSS 之间的差异及转换工具的使用。
SASS 比 CSS 做的更多
在 CSS 中，我们常常会遇到的问题是选择器嵌套的过深，导致代码过于臃肿和可读性不高。而 SASS 通过选择器嵌套、mixin 等功能，可以解决这些问题，同时提高了代码的维护性和可复用性。
嵌套选择器
首先，让我们来看下 SASS 中选择器嵌套的例子。
CSS 代码：
-- -------------------- ---- -------
---- -
----------- ----
-
---- -- -
------- --
-------- --
----------- -----
-
---- -- -- -
------ -----
-
---- -- -- - -
-------- ------
-------- -----
-SASS 代码：
-- -------------------- ---- -------
---- -
----------- ----
-- -
------- --
-------- --
----------- -----
-- -
------ -----
- -
-------- ------
-------- -----
-
-
-
-可以看到，SASS 让代码呈现出了更好的层次结构。在原生 CSS 中，我们需要手动输入每一个选择器，而在 SASS 中，只需要以嵌套的形式表示，就可以自动生成规则集。
Mixin
另一个 SASS 的优势是 Mixin，它为我们提供了一种把可重用的样式块组织在一起的方法，以实现 CSS 的可重用性、易维护性和可扩展性。
让我们看一个例子：
CSS 代码：
.boxShadow {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}SASS 代码：
-- -------------------- ---- -------
------ --------- -
------------------- - - --- ------- -- -- -----
---------------- - - --- ------- -- -- -----
--------------- - - --- ------- -- -- -----
----------- - - --- ------- -- -- -----
-
---------- -
-------- ----------
-在 SASS 中，我们可以将一个或多个 CSS 的方法封装为一个 mixin，以实现在多个选择器中重用该方法。
SASS 与 CSS 之间的转换
尽管 SASS 与 CSS 之间有诸多优势，但是在实际工作中，我们还是需要将 SASS 代码转换成 CSS 代码，以便确保网页的正确显示。有许多工具可以帮助我们实现这个过程。
1. Sass 官方命令行工具
Sass 官方提供了命令行工具，可以帮助我们实现 SASS 与 CSS 的转换。Sass 命令行工具虽然操作简单，但是基本使用方法完全掌握后，Sass 命令行工具能够一次性地编译多个 Sass 源文件，并且会监控源文件的变化，自动编译成 CSS 代码。
在终端中输入以下命令，即可下载 Sass 命令行工具：
npm install -g sass
2. Grunt 和 Gulp
Grunt 和 Gulp 是一种自动化构建的工具，它们都有 SASS 转换为 CSS 的插件，可以帮助我们自动化转换 SASS 代码。
首先，安装 Grunt 或 Gulp：
npm install -g grunt-cli npm install -g gulp
然后添加 Grunt 或 Gulp 的 SASS 插件。
- Grunt 插件：grunt-contrib-sass
- Gulp 插件：gulp-sass
3. Webpack
Webpack 是一个模块打包工具，在实现模块化开发的同时，它也可以进行 SASS 转换为 CSS。
在 Webpack 中，安装 SASS-loader 模块后，以 .scss 拓展名的样式文件可以被 import 或 require 导入到 JavaScript 模块中，很方便。
总结
SASS 与 CSS 之间的差异在于表达式、函数、变量、嵌套选择器和 Mixin 等方面的一些扩展。而 SASS 与 CSS 的转换，我们可以使用如 Sass 官方命令行工具、Grunt 和 Gulp、Webpack 的 SASS-loader 等工具来实现。
相比较于如此便捷性以及可读性的提高，你准备好去尝试 SASS 了吗？
参考代码
嵌套选择器
CSS 代码：
-- -------------------- ---- -------
---- -
----------- ----
-
---- -- -
------- --
-------- --
----------- -----
-
---- -- -- -
------ -----
-
---- -- -- - -
-------- ------
-------- -----
-SASS 代码：
-- -------------------- ---- -------
---- -
----------- ----
-- -
------- --
-------- --
----------- -----
-- -
------ -----
- -
-------- ------
-------- -----
-
-
-
-Mixin
CSS 代码：
.boxShadow {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}SASS 代码：
-- -------------------- ---- -------
------ --------- -
------------------- - - --- ------- -- -- -----
---------------- - - --- ------- -- -- -----
--------------- - - --- ------- -- -- -----
----------- - - --- ------- -- -- -----
-
---------- -
-------- ----------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc1feff6b2d6eab3209f62