在前端开发过程中，CSS 是不可或缺的一部分。然而，手写 CSS 也很容易出现繁琐的代码，导致难以维护。如果你正在寻找一种更加有效的方式来编写 CSS，那么可以考虑使用一个叫强调（stytized）的 NPM 包。强调是一个很好的抽象层，它将 CSS 写作一种 JavaScript 语言，并在视觉上增强了代码。
安装
要使用强调 NPM 包，首先应该进行安装。使用下面的命令来安装：
--- ------- -------- ------
基本用法
在项目中使用强调通常会包含两个步骤。第一步是引入强调到组件中：
------ ------ ---- -----------
第二步是使用强调包装你的 CSS，例如：
----- ----- - ---------- ---------- ------ ----------- ------- ------ -------------- --
在这个例子中，我们创建了一个 Title 组件，并使用强调对它的样式进行定义。这个例子中的 CSS 很简单，但是可以看到，强调允许我们使用类似于 CSS 的语法来定义样式。在这个例子中，我们将字体大小设置为 1.5em，文本居中，颜色为浅紫红色。
接下来，你可以在你的组件中使用 Title，就像这样：
-------- ----- -
------ -
-----
------------ --------------
------
--
-Props 和样式
强调的一个非常强大的功能是允许基于组件的 props 来定义样式。例如，我们可以简单地在我们的 Title 组件中添加一个 isRed prop：
----- ----- - ---------- ---------- ------ ----------- ------- ------ ------- -- ----------- - ----- - ----------------- --
在这个例子中，我们使用简单的 JavaScript 语法来判断 isRed 是否为 true。如果它是 true，那么我们将颜色设置为红色，否则设置为默认的浅紫红色。我们还可以通过在组件中传递 isRed prop 来决定它的颜色是什么。
-------- ----- -
------ -
-----
------ ------------------ --------------
---------- -----------
------
--
-这个例子中的 Title 有两个实例：一个红色，一个默认颜色。这是通过为第一个 Title 添加 isRed prop 实现的。
媒体查询
还有另一种很常见的样式情况，需要在不同的媒体查询条件下使用不同的样式。当然也是很容易使用强调实现。
以下是通过强调实现响应式设计的例子：
----- ----- - ----------
---------- ------
----------- -------
------ --------------
------ ----------- ------ -
---------- ----
-
--在这个例子中，我们使用 @media 查询来定义在屏幕宽度小于 768 像素时的样式。我们只需要将屏幕宽度的最大值设置为 768 像素并为它提供新的样式即可。所有在查询范围内的元素都将使用此样式。
总结
强调是一个非常强大的 CSS 抽象层，它可以使编写样式更加有效和易于维护。它允许使用类似于 CSS 的语法来定义样式，还允许使用 props 和媒体查询来动态生成样式。如果你正在寻找一种更好的方法来管理 CSS，请尝试使用强调。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600567e881e8991b448e413e