介绍
ember-cli-sass-pods-lab 是一个处理 Sass 的适配器。它会在编译之前将 Sass 文件编译为 CSS 文件，并按照 Ember.js 的模块化结构输出 CSS 文件。
如果你正在使用 Ember.js 并且喜欢 Sass，那么使用 ember-cli-sass-pods-lab 能够让你的项目更加易维护。
安装
添加 npm 包：
--- ------- ---------- -----------------------
使用
给你的应用程序配置 Sass 转换器：
修改 ember-cli-build.js 文件：
----- -------- - --------------------------------------------
-------------- - ------------------ -
--- --- - --- ------------------ -
------------ -
------------- -
------------
-
-
---
------------------------------------------------------
------ -------------
--这样，就可以在应用程序的 app/styles 目录下编写 Sass 文件了。
极简示例
在名称为 application.sass 的文件夹内写入以下内容：
------- ---------------
------------ -
------------- -
------ ------
-
-在名称为 my-component.sass 的文件内写入以下内容：
------------- - ----------------- ---- -
这将把以下 CSS 输出到页面：
------------ ------------- - ------ ------ - ------------- - ----------------- ---- -
这样，你就可以在你的 Ember.js 应用程序的组件和路由中使用此 CSS。
深度学习
如果你还不熟悉 Sass，这里是一个简单的入门指南。
注释
针对单行注释，可以使用 // 开头。注释后的所有代码都将被忽略。
-- ------
对于多行注释，你需要这样写：
-- ------ --
嵌套选择器
Sass 允许你嵌套选择器，使你可以将所有相关的选择器放在一起。
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
- -
-------- ------
-------- --- -----
------ -----
---------------- -----
------- -
----------------- -----
-
-
-
-
-这将输出以下 CSS：
--- -- - ------- -- -------- -- ----------- ----- - --- -- -- - -------- ------------- - --- -- -- - - -------- ------ -------- --- ----- ------ ----- ---------------- ----- - --- -- -- ------- - ----------------- ----- -
如你所见，嵌套了多个层次的选择器将被压缩成单个选择器。
变量
Sass 支持变量。使用 $ 符号在变量名前定义变量。
--------------- ----- ---- - ----------------- --------------- -
这将输出以下 CSS：
---- - ----------------- ----- -
引用变量
你可以在其他地方引用变量以便重复使用。
--------------- ----- ---------- - ----------------- --------------- - ---------- - ----------------- --------------- -
这将输出以下 CSS：
---------- - ----------------- ----- - ---------- - ----------------- ----- -
继承
继承正如你期望的一样：你可以从一个选择器中继承其他选择器的样式。
------ - -------- ----- ------- --- ----- ----- - -------------- - ------- ------- ------------- -------- -
这将输出以下 CSS：
------- -------------- - -------- ----- ------- --- ----- ----- - -------------- - ------------- -------- -
if 语句
Sass 支持 if 语句。
--------------- -------- -- ---
--- -------------- -- ------- -
-------------- -
----------------- --------
-
- ----- -
-------------- -
----------------- ---------------
-
-这将输出以下 CSS：
-------------- - ----------------- -------- -
for 循环
Sass 支持 for 循环。
---- -- ---- - ------- -- -
---------- -
------ ---- - -----
-
-这将输出以下 CSS：
------ - ------ ---- - ------ - ------ ---- - ------ - ------ ---- - -- ----- -- ------- - ------ ----- -
总结
在 Ember.js 应用程序中使用 Sass 是一个很好的主意。使用 ember-cli-sass-pods-lab，它能够在编译时将 Sass 编译为 CSS，并按照 Ember.js 的模块化结构输出 CSS 文件。
在这片文章中，我们讲解了 Sass 的基础知识，并提供了一个示例，让你知道如何在你的 Ember.js 应用程序中使用 Sass。
祝你使用愉快！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005567481e8991b448d3466