如果你是一个前端开发者，那么你一定知道 SASS 这个流行的 CSS 预处理器。使用 SASS 可以让你更方便地编写 CSS，节省时间并且使你的代码更加模块化和可复用。ember-cli-sass 是一个适用于 Ember 应用的 npm 包，它提供了使用 SASS 的便利。
安装 ember-cli-sass
首先，你需要安装 ember-cli-sass，这可以通过使用 npm 命令行工具进行安装。请确保你已经在你的项目根目录下，并且拥有一个正确配置环境的最新版本 npm 和 Node.js。
npm install ember-cli-sass --save-dev
使用 --save-dev 选项会将 ember-cli-sass 添加到开发依赖项中。
配置 ember-cli-sass
在你安装 ember-cli-sass 之后，你需要在你的 Ember 应用中配置它。为了做到这一点，你需要更新你的 ./ember-cli-build.js 文件，如下所示：
-- -------------------- ---- -------
---- --------
----- -------- - --------------------------------------------
-------------- - -------- ---------- -
--- --- - --- ------------------ -
------------ -
------------- -
-----------------------------------------
-----------------------------
-
-
---
------ -------------
--在这个例子中，你可以看到我们向 sassOptions.includePaths 添加了两个路径。第一个路径是 node_modules/ember-cli-sass/app/styles，这表示我们可以直接引用 ember-cli-sass 中的样式文件。第二个路径是 node_modules/bootstrap/scss，这是一个用来演示的样式库路径。你应该将这些路径配置为你自己的项目所需。
在 Ember 应用中使用 SASS
在你配置好 ember-cli-sass 后，你可以在你的 Ember 应用中使用 SASS 了。为了演示这一点，我们将在一个样式文件 app.scss 中添加一些样式：
-- -------------------- ---- -------
------- --------
-- ---------
--------------- --------
------------ --------
-- --------- ---------
-- ---
-- ----------- ------
-- ---
-- --------- ------
-- ---
-- ---- ------
---- -
----------------- ------------
------ ---------------
------- -
-------------- ----
-------- --- -----
----------------- ----------------------- -----
------ ------------
------------ -----
------- -----
------- --------
------- -
----------------- ----------------------- -----
-
-
-在样式文件中，我们首先引入了 ember 样式库。然后，我们添加一些变量，这些变量将被用于样式。我们也可以重载其他样式库，以满足我们的需求。最后，我们可以编写具体的页面样式，如页面背景颜色和按钮样式。在按钮样式中，你可以看到我们使用了 SASS 的 mixin 和嵌套特性。
如何使用？
最后，让我们看一下如何在你的 Ember 应用程序中使用 app.scss。为此，我们将要更新 app/templates/application.hbs 文件：
<h1>Welcome to Ember</h1>
<button class="button">Click me</button>
{{outlet}}在这个文件中，我们添加了一个按钮样式类 button，注意，这个类并没有在 HTML 中作为 CSS 类进行声明。这是因为在 Ember 应用中，样式表经过 ember-cli 处理后会被包含在打包的 JavaScript/CSS 文件中。SASS 就是在这里发挥作用，它提供了样式表的模块化，易于维护和变更。
总结
在本教程中，我们学习了如何在 Ember 应用中使用 SASS。我们首先安装了 ember-cli-sass，然后在 ./ember-cli-build.js 中配置了 sassOptions.includePaths。最后，我们使用示例代码展示了如何编写样式文件和引用它们。通过本文的学习和实践，你可以更好地理解 Ember 和 SASS 的使用，并将它们用于你的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60089