介绍
ember-cli-sass-pods-lab 是一个处理 Sass 的适配器。它会在编译之前将 Sass 文件编译为 CSS 文件，并按照 Ember.js 的模块化结构输出 CSS 文件。
如果你正在使用 Ember.js 并且喜欢 Sass，那么使用 ember-cli-sass-pods-lab 能够让你的项目更加易维护。
安装
添加 npm 包：
npm install --save-dev ember-cli-sass-pods-lab
使用
给你的应用程序配置 Sass 转换器：
修改 ember-cli-build.js 文件：
-- -------------------- ---- -------
----- -------- - --------------------------------------------
-------------- - ------------------ -
--- --- - --- ------------------ -
------------ -
------------- -
------------
-
-
---
------------------------------------------------------
------ -------------
--这样，就可以在应用程序的 app/styles 目录下编写 Sass 文件了。
极简示例
在名称为 application.sass 的文件夹内写入以下内容：
@import "my-component";
.application {
.my-component {
color: green;
}
}在名称为 my-component.sass 的文件内写入以下内容：
.my-component {
background-color: red;
}这将把以下 CSS 输出到页面：
.application .my-component {
color: green;
}
.my-component {
background-color: red;
}这样，你就可以在你的 Ember.js 应用程序的组件和路由中使用此 CSS。
深度学习
如果你还不熟悉 Sass，这里是一个简单的入门指南。
注释
针对单行注释，可以使用 // 开头。注释后的所有代码都将被忽略。
// 这是单行注释
对于多行注释，你需要这样写：
/* 这是多行注释 */
嵌套选择器
Sass 允许你嵌套选择器，使你可以将所有相关的选择器放在一起。
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
- -
-------- ------
-------- --- -----
------ -----
---------------- -----
------- -
----------------- -----
-
-
-
-
-这将输出以下 CSS：
-- -------------------- ---- ------- --- -- - ------- -- -------- -- ----------- ----- - --- -- -- - -------- ------------- - --- -- -- - - -------- ------ -------- --- ----- ------ ----- ---------------- ----- - --- -- -- ------- - ----------------- ----- -
如你所见，嵌套了多个层次的选择器将被压缩成单个选择器。
变量
Sass 支持变量。使用 $ 符号在变量名前定义变量。
$primary-color: #333;
body {
background-color: $primary-color;
}这将输出以下 CSS：
body {
background-color: #333;
}引用变量
你可以在其他地方引用变量以便重复使用。
-- -------------------- ---- ------- --------------- ----- ---------- - ----------------- --------------- - ---------- - ----------------- --------------- -
这将输出以下 CSS：
#nc-header {
background-color: #333;
}
#nc-footer {
background-color: #333;
}继承
继承正如你期望的一样：你可以从一个选择器中继承其他选择器的样式。
-- -------------------- ---- ------- ------ - -------- ----- ------- --- ----- ----- - -------------- - ------- ------- ------------- -------- -
这将输出以下 CSS：
.panel, .panel-success {
padding: 10px;
border: 1px solid #aaa;
}
.panel-success {
border-color: #5cb85c;
}if 语句
Sass 支持 if 语句。
-- -------------------- ---- -------
--------------- -------- -- ---
--- -------------- -- ------- -
-------------- -
----------------- --------
-
- ----- -
-------------- -
----------------- ---------------
-
-这将输出以下 CSS：
.color-display {
background-color: #ff0000;
}for 循环
Sass 支持 for 循环。
@for $i from 1 through 10 {
.col-#{$i} {
width: #{$i * 10}%;
}
}这将输出以下 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