什么是 atom-sass?
atom-sass 是一个基于 node.js 的包管理器 npm 的一个模块，用于将 Sass 源代码编译成 CSS 样式表。它是基于 Sass 的扩展语言，提供灵活性和易于维护性的样式表结构。
安装
你可以使用 npm 进行全局安装 atom-sass:
npm install -g atom-sass
基本使用
使用 atom-sass 非常简单，只需要运行以下命令：
atom-sass [input] [output] [options]
其中：
input是 Sass 的源代码文件,output是生成的 CSS 文件名,options是一个可选的对象参数，包含你要使用的选项。
例如，要将 styles.scss 编译成 styles.css ，可以运行以下命令：
atom-sass styles.scss styles.css
选项
atom-sass 支持多种选项，可以通过运行 atom-sass --help 命令查看完整的选项列表。
以下是一些常用的选项：
--style
指定编译后的 CSS 样式表输出格式，支持以下四种选项：
nested（默认）：嵌套样式(嵌套的好处是，无论是哪个区块里的样式都容易看出来)expanded：扩展样式(跟嵌套样式相反，它是将每一个样式都写在一起)compact：压缩样式(它将所有的样式都放在一行上)compressed：紧凑型样式(它是最小化的CSS模板)
例如要使用紧凑型样式输出，可以运行以下命令：
atom-sass input.scss output.css --style compressed
--watch
指定一个 Sass 文件夹，任何更改都会自动编译 CSS 文件。例如要开启 watch 模式，可以运行以下命令：
atom-sass scss:css --watch
示例代码
以下是一个示例代码，它将 styles.scss 编译成 styles.css ：
-- -------------------- ---- ------- -- ----------- --------------- ----- ---- - ---------- ----- ------ --------------- - -- - ---------- ---- ------ --------------- -
-- -------------------- ---- ------- ------------ ---- - ---------- ----- ------ ----- - -- - ---------- ---- ------ ----- -
总结
在本教程中，我们学习了如何使用 npm 包 atom-sass 来编译 Sass 源代码。我们还学习了如何使用选项来控制输出格式和开启 watch 模式。希望本教程能够帮助你更好地理解和使用 atom-sass 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd781e8991b448e57b7