什么是 fondant
fondant 是一个可以快速生成可定制化的 CSS 样式表的库，其灵感来源于 Sass 和 Less。我们可以通过一定的约定来定义自己的样式，然后借助 fondant 来编译生成 CSS 文件。
安装 fondant
我们可以通过 npm 来安装 fondant：
npm install fondant --save-dev
开始使用 fondant
定义样式
在我们开始使用 fondant 之前，需要先定义一些样式规则。样式的定义方式和 Sass/Less 类似，但是 fondant 不需要变量声明，而是直接写样式规则。
我们来定义一个简单的样式文件：
-- -------------------- ---- ------- -- ----------- --------- -------- --- - ----------------- --------- ------ ------ -------- --- ----- -------------- ---- -
这是一个含有一个变量的样式文件，我们将会使用 fondant 动态生成这个变量的值。
常规语法
我们可以通过下面的语法，将一个样式规则转变为 fondant 的语法：
-- -------------------- ---- ------- -- ---- -- -- -------- -------- ----- --------- ----------------- ------------- --- - ----------------- --------- ------ ------ -------- --- ----- -------------- ---- -
这个语法中，我们使用了 function 函数来定义变量的值。这个函数的第一个参数是函数名字，第二个参数是一个数组，数组中的元素是这个函数的参数。
我们可以使用这种语法来定义任何一个能由 CSS 函数实现的值。比如，我们可以使用 rgba 函数来定义透明度：
$bgColor: function('rgba', [255, 90, 90, 0.8]);
border-color: function('rgba', [255, 90, 90, 1 - 0.8]);进阶语法
我们除了可以使用常规语法，还可以使用进阶语法，来实现更复杂的定义。使用进阶语法时，我们需要定义一个样式规则对象。这个对象中，每一个属性名代表一个样式规则，属性值是这个样式规则的 function 调用语法。
我们来看一个例子：
-- -------------------- ---- ------- -- ------------- --------- - ------ ------------------------- ---- -------- --------------------------- --- -- -- --------- -------------- - ------ ------- -------- ------ -- -- ---- --- - ------ --------------- ----------------- ----------------- - -- -------- ------------ ---------------------- --------------- ----------- -- - ---------- ---- --- ------- - ------------------- --- ----- - --------------------- -------------------
这个例子中，我们定义了一个深度定制的样式规则，$myTheme 中包含了 color 和 bgColor 两个样式规则。我们定义了一个 myGenerate 函数来生成主题。这个函数接受两个参数，第一个参数是默认主题，第二个参数是深度定制的主题。我们利用 fondant 的动态性，在 JavaScript 层面将主题写入样式规则中。
JavaScript 中生成样式
在上面的例子中，我们使用了 fondant 函数来生成 CSS 样式。在 JavaScript 中，我们可以使用 fondant 生成样式并动态地修改样式规则和主题，使得样式动态可变。
我们来看一个完整的例子，向 CSS 中注入不同主题的样式：
-- -------------------- ---- -------
--- ------- - -------------------
-- ------
--- -------- - -
--------------- -
------ ----------------------- ---
--
------- -
----------------- ------------------------- ---
--
-- ------
--
-- ------
--- ------------ - -
------ --------
-------- ------
--
-- ------
--- ------ - -
-
----- ---------
------ --------
-------- ---------
--
-
----- -------
------ ----------
-------- ------
-
--
-- -- ------- ------
-------- ---------------- -
-- ----
--- ----------- - -
------ ------------
-------- -------------
--
-- ----
--- -------- - ------------------------- -------------- --------------
------ ----------------- - -------- ---
-
-- -------
-------- ---------------- -
--- --------- - ------------------------------------
-------------------------- -
--- ------- - ---------------------------------
------------- - -------
----------------- - -------
-------------------------------
---
------------------------------------ ---------- -
--- ------------- - ----------------------- -
------ ------ --- -----------
--------------
--- ------ - -------------------------
--- --------- - -------------------------------------
-- ------------ -
--------- - --------------------------------
------------------- - ------------
-------------------------------------
-
------------------- - -------
---
-
-- ---
-----------------在这个例子中，我们定义了一个样式规则对象，然后定义了默认主题和可选主题。我们将可选主题写入下拉框中，然后通过监听下拉框的 change 事件，动态地生成不同主题下的样式。
总结
fondant 是一个十分灵活且强大的样式库，我们可以使用它来定义定制化的样式规则，并在 JavaScript 层面生成不同主题的样式，让样式能够更灵活、动态地适应不同的场景和需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e481e8991b448e0732