简介
aesthetic 是一个用于提供 CSS 样式主题的 JavaScript 库。它使用了一些内置的预处理器，例如 Less、Sass 和 Stylus，同时还支持对 CSS Modules 和 CSS-in-JS 库的整合。
一般情况下，我们使用 CSS 样式主题时需要手动维护一套样式表。而 aesthetic 能够有效地简化这个过程，帮助用户更快更便捷地创建和管理样式主题。
让我们一起学习如何使用这个强大的 npm 包来提升我们的设计开发效率。
安装
使用 npm 安装 aesthetic：
--- ------- ---------
入门使用
要使用 aesthetic，首先需要创建一个主题对象，以及定义 CSS 代码块。下面是一个简单的示例：
------ - ----------- - ---- ------------
----- ----- - -------------
------- -
-------- ----------
---------- ----------
--
----- -
------ -------
--
---
----- ------ - ------------------------- -- --
---------- -
---------------- -------------------------
------ --------------------
-------- -------
--
----
---------------------------- -- - ------------ ---------- -
---------------------------- -- -------------------- - ----------------- -------- ------ ----- -------- ----- --首先，使用 createTheme 函数创建了一个名为 theme 的主题对象。在这里，我们定义了两种颜色：primary（#FF5733）和 secondary（#7EC3A6）以及一种文本颜色（#333）。
接下来，使用 createStyleSheet 函数创建了一个 CSS 代码块。在这里，我们为容器指定了背景颜色、文本颜色和内边距。注意，我们使用了主题对象中定义的变量来指定颜色值。
最后，我们调用 classes 和 content 属性来获取生成的 CSS 类名和 CSS 代码。
先进特性
自定义状态和变量
通常情况下，我们会需要为不同的状态、不同的元素或者不同的组件定义不同的样式。aesthetic 支持使用变量定义状态，在代码中引用这些状态来获取正确的样式。
以下是一个示例：
----- ------ - ------------------------- -- --
---------- -
---------------- -------------------------
---------- -
---------------- ------------------------ - ------ ------- ---
--
----------- -
---------------- ------------------------ - ------ -------- ---
--
-- ---------- -
------ ----------
--
--
-------- ---
------- ---
----在这个示例中，我们定义了一个状态为 hover 和 active 的背景颜色，并为 caption 元素设置了文本颜色。
我们需要在 theme 对象中定义我们想要使用的状态：
----- ----- - -------------
------- -
-------- ----------
---------- ----------
------ ----------
------- ----------
--
---然后，我们可以使用 state 参数来在 theme.color 函数中引用这些状态。在本例中，我们分别设置了 hover 和 active 状态的背景颜色。
条件语句
由于 aesthetic 使用 JavaScript 写作 CSS，因此可以使用 JavaScript 的条件语句来定义样式，如下所示：
----- ------ - ------------------------- -- --
---------- -- -- --
---------------- -------
--------------------- - --- -- -
---------- -- - ---- ------- -- -- ------
---
---
----在这个示例中，我们使用了一个条件语句来定义当窗口宽度大于 800 时，为容器元素设置阴影效果。这是一个非常常见的用法，因为我们希望在不同的屏幕尺寸下有不同的样式。
模块化样式
有时，我们需要使用模块化的样式来封装某些元素的样式。aesthetic 支持使用 CSS Modules 和 CSS-in-JS 库来实现这个功能。
以下是使用 css-modules-require-hook 的示例：
------ - ------ - ---- ----------------------
------ - ------------ - ---- ------------
------ - -------------------- ---------- - ---- ------------------
------ ----------- ---- ---------------------------
----- ----- - -------------
------- -
-------- ----------
---------- ----------
--
---
----- -------- - ------------------------------- -
-------- -----------------
---------------- ------ -- -----------------
---
----- --------- - ------------------- -
----------- -------- ---------
---------
---
-------------
------------------- ------ --------- -- ------------------------------------ ----------
---
----- ------ - ----------------------------
---------- -
------- -------
---------- ---------
-------- -------
----------- ---------
--------------- ---------
-------------- ---------
--
------ -
------- ----------
------------- -------
--
-------- ---
---在这个示例中，我们使用了 css-modules-require-hook 模块来加载 CSS 模块。
Aesthetic 支持 CSS Modules 和 CSS-in-JS 库在样式表中使用 extend，来包含其他样式。
结论
aesthetic 是一个强大的 npm 包，可以帮助我们简化样式管理，提高开发效率。使用 aesthetic，我们可以避免手动编写重复代码和手动维护样式表。它与 CSS Modules 和 CSS-in-JS 库的集成让我们可以更好地结构化我们的样式代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/aesthetic