在前端开发中，我们经常需要对 CSS 样式进行响应式设计，以适应不同的设备尺寸。其中，涉及到响应式布局的样式处理就需要借助于 CSS-in-JS 库，而 facepaint 就是一个比较流行的 CSS-in-JS 库之一。而 facepaint-object-keys 则提供了一种更加方便的样式书写方式。
facepaint-object-keys 是一个可以通过对象来书写 CSS 样式的插件，它提供了一种类似于 less 和 scss 的样式书写方式，使得样式更加清晰明了，且减少了重复的样式代码。
本篇文章将会详细介绍如何使用 facepaint-object-keys 插件。
安装
在使用 facepaint-object-keys 之前，需要先安装 facepaint 和 facepaint-object-keys 两个库。可以通过 npm 来安装：
npm install facepaint facepaint-object-keys
facepaint-object-keys 仅仅是一个 facepaint 的扩展库，所以在使用时只需要将 facepaint-object-keys 引入即可。
书写样式
在介绍如何使用 facepaint-object-keys 插件之前，我们先来回忆一下如何使用 facepaint 库来书写样式。
facepaint 库提供了一个函数 facepaint，它可以接受一个样式数组作为参数，并返回一个可以进行样式计算的函数。例如：
import { facepaint } from 'facepaint'
const mq = facepaint([
'@media(min-width: 420px)',
'@media(min-width: 920px)',
'@media(min-width: 1120px)'
])上面的代码仅仅是创建了一个计算函数，但是并没有定义样式。我们可以通过定义一个样式对象，并将它传入计算函数来进行样式计算。例如：
const styles = {
color: 'red',
backgroundColor: 'blue'
}
const App = () => <div css={mq(styles)} />在上面的代码中，我们创建了一个样式对象，并通过 mq 函数来计算真正的样式。需要注意的是，mq 函数本身并不会修改样式对象，而是返回一个新的样式对象。
现在，我们来看看如何使用 facepaint-object-keys 插件来书写样式。
facepaint-object-keys 提供了一个函数 ObjectKeys, 它可以接受一个对象并返回一个可以进行样式计算的函数。例如：
import { ObjectKeys } from 'facepaint-object-keys'
const mq = ObjectKeys({
sm: '@media(min-width: 420px)',
md: '@media(min-width: 920px)',
lg: '@media(min-width: 1120px)'
})上面的代码创建了一个计算函数，并将 sm, md, lg 这三个属性都对应了一个 media query 规则。现在，我们可以通过在样式对象中使用这些属性来书写样式。例如：
-- -------------------- ---- -------
----- ------ - -
------ ------
---------------- -------
--------------- ----
-------- -
-------- ------
--
-------- -
-------- ------
--
-------- -
-------- ------
-
--
-
----- --- - -- -- ---- --------------------------- --在上面的代码中，我们使用了 mq.sm, mq.md, mq.lg 这三个 media query 规则，并且将他们作为样式对象中的属性来书写样式。需要注意的是，这里书写的样式对象看起来和 CSS 选择器非常相似，但是它们并不是 CSS 选择器，而是一个普通的 JavaScript 对象。
另外在上面的例子中，我们还演示了如何使用 facepaint-object-keys 来书写嵌套的样式代码。
示例
下面我们来看一个完整的例子。在这个例子中，我们将会使用 facepaint-object-keys 来书写一个响应式布局的样式。
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
-- -- ----- ----- --
----- -- - ------------
--- ------------------ --------
--- ------------------ --------
--- ------------------ --------
--
-- ----
----- ------ - -
---------- ----
-------- -------
-------------- ---------
----------- ---------
-------- -
-------------- -----
-
---
-------- ----
---------------- -------
------ -------
------- --------
-------- -
------- -------
--
-------- -
------ --------
------- ------
--
-------- -
--------- --------
---- ----
----- ----
------- ---
-
---
-------- ----
---------------- --------
------ -------
------- ---------- - --------
-------- -
------- ---------- - -------
--
-------- -
------ ---------- - --------
------- ------
-
--
-
----- --- - -- -- -
---- -----------------------
---- -------------------- --
---- -------------------- --
------
-在上面的代码中，我们通过 ObjectKeys 函数来定义了三个 media query 规则，并将他们应用于不同的样式对象上。其中，mq.container 定义了一个垂直方向的弹性布局，并在某些屏幕尺寸下改为水平方向的布局；mq.sidebar 定义了一个宽度和高度都为百分比的元素，并在不同屏幕尺寸下改变尺寸和定位；mq.content 同样定义了一个宽度和高度都为百分比的元素，并在不同屏幕尺寸下改变尺寸。
总结
facepaint-object-keys 提供了一种可以通过对象来书写 CSS 样式的方式，使得样式更加清晰明了，减少了重复的样式代码。通过本篇文章的介绍和示例，相信读者已经理解了如何使用 facepaint-object-keys 插件来书写响应式布局的样式，并且可以运用到实际项目中去。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822b4b