简介
aesthetic 是一个用于提供 CSS 样式主题的 JavaScript 库。它使用了一些内置的预处理器，例如 Less、Sass 和 Stylus，同时还支持对 CSS Modules 和 CSS-in-JS 库的整合。
一般情况下，我们使用 CSS 样式主题时需要手动维护一套样式表。而 aesthetic 能够有效地简化这个过程，帮助用户更快更便捷地创建和管理样式主题。
让我们一起学习如何使用这个强大的 npm 包来提升我们的设计开发效率。
安装
使用 npm 安装 aesthetic：
npm install aesthetic入门使用
要使用 aesthetic，首先需要创建一个主题对象，以及定义 CSS 代码块。下面是一个简单的示例：
-- -------------------- ---- ------- ------ - ----------- - ---- ------------ ----- ----- - ------------- ------- - -------- ---------- ---------- ---------- -- ----- - ------ ------- -- --- ----- ------ - ------------------------- -- -- ---------- - ---------------- ------------------------- ------ -------------------- -------- ------- -- ---- ---------------------------- -- - ------------ ---------- - ---------------------------- -- -------------------- - ----------------- -------- ------ ----- -------- ----- --展开代码
首先，使用 createTheme 函数创建了一个名为 theme 的主题对象。在这里，我们定义了两种颜色：primary（#FF5733）和 secondary（#7EC3A6）以及一种文本颜色（#333）。
接下来，使用 createStyleSheet 函数创建了一个 CSS 代码块。在这里，我们为容器指定了背景颜色、文本颜色和内边距。注意，我们使用了主题对象中定义的变量来指定颜色值。
最后，我们调用 classes 和 content 属性来获取生成的 CSS 类名和 CSS 代码。
先进特性
自定义状态和变量
通常情况下，我们会需要为不同的状态、不同的元素或者不同的组件定义不同的样式。aesthetic 支持使用变量定义状态，在代码中引用这些状态来获取正确的样式。
以下是一个示例：
-- -------------------- ---- ------- ----- ------ - ------------------------- -- -- ---------- - ---------------- ------------------------- ---------- - ---------------- ------------------------ - ------ ------- --- -- ----------- - ---------------- ------------------------ - ------ -------- --- -- -- ---------- - ------ ---------- -- -- -------- --- ------- --- ----展开代码
在这个示例中，我们定义了一个状态为 hover 和 active 的背景颜色，并为 caption 元素设置了文本颜色。
我们需要在 theme 对象中定义我们想要使用的状态：
const theme = createTheme({ colors: { primary: '#FF5733', secondary: '#7EC3A6', hover: '#A2D9CE', active: '#73C6B6', }, });
然后，我们可以使用 state 参数来在 theme.color 函数中引用这些状态。在本例中，我们分别设置了 hover 和 active 状态的背景颜色。
条件语句
由于 aesthetic 使用 JavaScript 写作 CSS，因此可以使用 JavaScript 的条件语句来定义样式，如下所示：
const styles = theme.createStyleSheet(() => ({ container: () => ({ backgroundColor: '#FFF', ...(window.innerWidth > 800 && { boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', }), }), }));
在这个示例中，我们使用了一个条件语句来定义当窗口宽度大于 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
