CSS 是前端开发中不可或缺的一环。在使用 CSS 过程中，经常需要做到类似以下的操作：
- 定义一个基础的 CSS 样式
- 在不同的需要中，基于基础样式进行调整
- 定义不同状态下的样式，如:hover, :active 等
- 在不同的场景下，对同一元素进行不同的样式设置
针对这些需求，有一个非常好用的 NPM 包 ember-cli-css-extensions。本文将详细介绍该包的使用方法。
安装
在使用 ember-cli-css-extensions 之前，需要先安装 Ember CLI：
npm install -g ember-cli
然后，在 Ember 项目中，使用以下命令安装 ember-cli-css-extensions：
ember install ember-cli-css-extensions
基本使用
在 CSS 中，我们可以使用 @extend 关键字实现样式的重用。例如：
-- -------------------- ---- ------- ---- - ----------------- ----- ------- --- ----- ----- ------ ----- -------- ------------- ---------- ----- ------- ----- ------------ ----- -------- - ----- ----------- ------- ---------------- ----- --------------- ---------- --------------- ------- - ------------ - ------- ----- ----------------- ----- ------------- ----- ------ ----- - ------------ - ------- ----- ----------------- ----- ------------- ----- ------ ----- -
在上述代码中，我们定义了一个 .btn 的基础样式，然后通过 @extend 实现了 .btn-primary 和 .btn-success 的样式重用。
而在 ember-cli-css-extensions 中，则可以使用 .extends 类来实现样式的继承。
例如：
-- -------------------- ---- -------
--------- -
----------------- -----
------- --- ----- -----
------ -----
-------- -------------
---------- -----
------- -----
------------ -----
-------- - -----
----------- -------
---------------- -----
--------------- ----------
--------------- -------
-
------------ -
-------- -
----------
----------------- -----
------------- -----
------ -----
-
-
------------ -
-------- -
----------
----------------- -----
------------- -----
------ -----
-
-和普通 CSS 的实现代码类似，我们同样定义了一个基础的样式 .btn-base， 然后使用 .extends 声明了 .btn-primary 和 .btn-success 继承自 .btn-base，并在继承时通过后代选择器，实现了样式的调整。
深度继承
在 CSS 中，有时候需要通过选择器的嵌套，实现样式的修饰。例如：
.btn:hover {
background-color: #000;
color: #fff;
}而在使用 ember-cli-css-extensions 时，则可以使用 $self 关键字实现嵌套的选择器调用。
例如：
-- -------------------- ---- -------
--------- -
----------------- -----
------- --- ----- -----
------ -----
-------- -------------
---------- -----
------- -----
------------ -----
-------- - -----
----------- -------
---------------- -----
--------------- ----------
--------------- -------
------- -
----------------- -----
------ -----
-
---------- -
------------ -----
-
-
------------ -
-------- -
----------
----------------- -----
------------- -----
------ -----
------- -
----------------- -----
------ -----
-
---------- -
----- -
------------ -------
-
---------------- ----------
-
-
-
------------ -
-------- -
----------
----------------- -----
------------- -----
------ -----
------- -
----------------- -----
------ -----
-
---------- -
--------------- ----------
-
-
-在上述代码中，我们定义了一个 .btn-inner 的子元素样式，并使用 $self 实现了 .btn-primary 和 .btn-success 对于子元素 .btn-inner 样式的调整。
同时，我们也可以通过类似于 .btn-base:hover 的样式，定义基础样式的 :hover 状态，并在继承时进行修改。
示例代码
下面是一个完整的示例代码：
<!-- app/templates/application.hbs -->
<button {{action "clickBtn" "primary"}} class="btn-primary btn">
<span class="btn-inner">Primary</span>
</button>
<button {{action "clickBtn" "success"}} class="btn-success btn">
<span class="btn-inner">Success</span>
</button>-- -------------------- ---- -------
-- ------------------ --
--------- -
----------------- -----
------- --- ----- -----
------ -----
-------- -------------
---------- -----
------- -----
------------ -----
-------- - -----
----------- -------
---------------- -----
--------------- ----------
--------------- -------
------- -
----------------- -----
------ -----
-
---------- -
------------ -----
-
-
------------ -
-------- -
----------
----------------- -----
------------- -----
------ -----
------- -
----------------- -----
------ -----
-
---------- -
----- -
------------ -------
-
---------------- ----------
-
-
-
------------ -
-------- -
----------
----------------- -----
------------- -----
------ -----
------- -
----------------- -----
------ -----
-
---------- -
--------------- ----------
-
-
-效果如下：
通过对比上面的代码和普通 CSS 的使用，我们可以发现，使用 ember-cli-css-extensions 后，通过类似于 .extends 和 $self 这样的特殊的语法，我们能够更加快速方便地完成样式的定义和继承，并且使得代码更加具有可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005573c81e8991b448d431a