是什么？
postcss-hocus 是一个 postcss 插件，它可以帮助我们更方便地为 hover 和 focus 状态添加样式。
为什么要用它？
CSS 中 :hover 和 :focus 等伪类需要使用额外的样式定义，而这些样式定义往往需要重复书写，不利于代码的维护和复用。使用 postcss-hocus 插件，我们可以简化这个过程，使得为元素添加 hover 和 focus 样式更加快捷、简单和统一。
怎么用它？
安装
首先，我们需要安装 postcss-hocus。我们可以使用 npm 进行安装，在终端中执行如下命令：
npm install postcss-hocus --save-dev
配置
我们需要在 postcss.config.js 中进行配置，告诉 postcss 在处理样式时使用 postcss-hocus 这个插件。
module.exports = {
plugins: [
require('postcss-hocus')
]
}使用
现在，我们可以在样式中使用 postcss-hocus 了。它的用法非常简单：
-- -------------------- ---- ------- -- ------ -- ------- - ------ ---- - -- ----- -- - - ------ ------ - ------- - ------ ---- -
我们可以看到，在使用 postcss-hocus 后，我们不需要再为 a 标签添加 hover 状态的样式，插件将为我们自动生成。
同样，我们可以为其他状态设置样式，比如 focus，active 等：
-- -------------------- ---- ------- ------ - ----------------- ------ -------------------- ----- - -- ------ -- ------------ - ----------------- ---- - -- ----- -- ------ - ----------------- ------ -------------------- ----- - ------------ - ----------------- ---- - ------------ - -------- ----- ----------- - - - --- ----- - ------------- - ----------------- ----- -
高级使用
除了默认的设置，我们还可以通过 postcss-hocus 提供的 API 进行更加高级的设置。
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------------
--------- ------------------
------------ --------- ---------
--------- --
--
-
-以上代码表示，我们将为所有 class 名字为 my-hover-class 的元素设置 hover 和 focus 状态的样式，并且添加 onClick 回调函数。
结论
使用 postcss-hocus 插件，我们可以快速、简单、统一地为元素添加 hover 和 focus 状态的样式，提高代码的可维护性和复用性。希望这篇介绍能够帮助大家更好地使用 postcss-hocus 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff681e8991b448ddc8b