前言
在前端开发中，对于样式的处理一直是一个非常重要的问题，而 Sass、Less、 Stylus 等样式预处理器相对于传统 CSS，可以更加简单、方便地帮助我们进行样式的维护和复用。但是，这些样式预处理器的使用，需要先前安装相应的编译器，然后才能使用相应的语法进行编码。这在一定程度上，增加了前端开发的门槛。
而近几年，出现了一些新的工具类库，可以帮助开发者更加便捷的处理样式问题。本文介绍的 @savvy-css/ember-savvy-css 就是其中的一种，它是一个针对于 Ember 框架的内联样式处理工具，可以帮助我们不用安装额外的编译器就能够使用 Sass 和类似于 CSS 的语法，快速的进行样式的编写和维护。
本文就为大家介绍该工具的详细用法。
安装
在使用 @savvy-css/ember-savvy-css 之前，我们需要先使用 npm 进行安装，在项目的根目录中执行以下命令：
npm install @savvy-css/ember-savvy-css --save
使用
下面我们就来介绍一下如何使用 @savvy-css/ember-savvy-css 进行样式的编写工作。
配置文件
在使用 @savvy-css/ember-savvy-css 编写样式之前，我们需要先创建一个 savvy.config.js 的配置文件，用于配置该工具的相关设置，例如主题、颜色等。文件的基本内容如下：
-- -------------------- ---- -------
-------------- - -
-------- -
------ ------
----------- -------
--
---------- -
------ --------
----------- ------
--
------ -
------ -
--------- ------
--
------- -
--------- ------
-
-
-该配置文件以 CommonJS 风格导出一个对象，在该对象中，我们可以指定不同的主题样式、颜色、字体大小等，这些将会被同步到所有样式文件中，方便我们在之后的样式中直接调用。
新建样式文件
我们可以在 Ember 应用的代码目录 app/styles/savvy/ 中新建一个 Sass 文件，如 button.scss，然后在里面书写样式的代码：
-- -------------------- ---- -------
------------- -
------- --- ----- -----
---------- ----------------------
----------------- -------------------
------- -
----------------- -------------------------- -----
-
-在这里，我们可以看到，相对于传统的 Sass 语法，这里使用了一些类似于 CSS 的结构和变量。primary.background 取的就是在 savvy.config.js 中定义的主题颜色值，sizes.medium.fontSize 则是样式大小的变量，其中的 medium 也是在配置文件中定义的。
此外，还可以书写类似下面的代码：
-- -------------------- ---- ------- -- ---- ------------------------------- --------------- ----- -- -- ---------------------------- ------- ------------ ------------- - -------------- --------------- -
这与传统的 Sass 编写方式无异，不过在 @savvy-css/ember-savvy-css 中变量的作用域限制仅仅在这个文件中。
使用组件
当样式文件编写完成之后，我们可以直接在组件中引用该样式文件，在组件文件 app/components/button.js 中添加：
import Component from '@glimmer/component';
import styles from '../styles/savvy/button.scss';
export default class ButtonComponent extends Component {
get myStyles() {
return styles;
}
}在组件模板文件中，我们可以直接使用该样式：
<button class={{myStyles[".savvy-button"]}}>按钮</button>需要注意的是，由于样式文件在组件中的作用域仅限于当前组件，所以，我们需要在上面的代码中添加前缀 .savvy-button，否则，样式将不会被正确渲染。
示例代码
下面是一个完整的示例项目：
-- -------------------- ---- -------
-- ------ ------
------ ----------- ---- ---------------------
------ -------- ---- -------------
------ ---------------- ---- --------------------------
------ ------ ---- -----------------------
------ ------ ---- -----------------------------
----- --- - --------------------
------------- --------------------
---------------- -----------------------
---------
--------- ------------------------
------- -
----------------- -- -- -----------
-
---
--------------------- ---------------------
------ ------- ----
-- ---- -----------------------------
------ --------- ---- ---------------------
------ ------- ----- ------------------- ------- --------- -
--- ---------- -
------ ------------------- - ----------------------- - --------------------------
-
-
-- -------- ----------------------------------------
------- --------------------------------
-- ---- ----------------------------
------------- -
------- --- ----- -----
---------- ----------------------
----------------- -------------------
------- -
----------------- -------------------------- -----
-
-
-- ------ -------------------------------
--------------- -----
-- -------- -------------------------------------
------------- -
---------- ---------------------
-
-- ------ ---------------
-------------- - -
-------- -
------ ------
----------- -------
--
---------- -
------ --------
----------- ------
--
------ -
------ -
--------- ------
--
------- -
--------- ------
-
-
-本文的示例项目已托管在 GitHub 上，地址为：https://github.com/huatx/ember-savvy-css-sample。
结尾
@Savvy-CSS/ember-savvy-css 是一个常见的专门针对于 Ember 框架的内联样式工具，能够帮助我们更加快捷方便的处理样式问题，本文也为大家介绍了一些该工具的使用方法，希望这对于广大前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571d281e8991b448e83ba