介绍
在网站开发中，字体图标早已成为不容忽视的一部分。它们可以用来解决图像图片因体积而降低加载速度等问题，也能使网页设计更具灵活性。自定义字体图标不仅满足了各种设计和排版的需求，而且在多个设备间的显示稳定性和一致性上，表现也更佳。
除了设计方面，我们往往也需要在字体图标的颜色上进行自定义。LESS 是一款 CSS 预处理器，它的一大特点就是支持变量、混合、循环等高级语言特性，可以让开发者更加便利地在 CSS 中大规模地管理、使用颜色等常用属性。接下来就让我们看看如何通过 LESS 实现字体图标的配色方案。
LESS 变量
LESS 的变量定义方式就是在某个属性上加上 @ 符号。比如我们使用以下代码定义了四个变量：
@primary-color: #409EFF; @success-color: #67C23A; @warning-color: #E6A23C; @error-color: #F56C6C;
以上代码将 @primary-color、@success-color 等变量分别赋值为其颜色值。通过定义变量来统一管理颜色值，避免了频繁修改多个位置中的颜色值等无效消耗，同时方便了开发者的整体颜色控制。
字体图标
为了配合 LESS 自定义的颜色方案，我们需要使用响应的字体图标库。网上有很多开源的字体图标库，这里我们以阿里图标库为例。
在使用阿里图标库之前，我们需要先将图标库下载到本地。随后解压后将其放入项目中静态资源文件夹内，如图所示：
我们可以在代码中以 @font-face 方式引入字体。如下：
-- -------------------- ---- ------- ---------- - ------------ ------- ---- ---------------------- -- ------- -- ---- ---------------------------- ---------------------------- -- ----- ------- -- ---------------------- --------------- -- -------------- -- --------------------- ------------------- -- ---------------------------- -------- --- -- ------------------------------- -------------- -- ------ -- - ----- - ------------ ------ ----------- -- -- ---------- ----- ---- ----------- ------- ---- -
我们可以将 font-family 设置给 .icon，并通过 content 显示字体图标。这里需要注意的是，设定的 font-family 应和引用字体文件的名称一致。通过 font-size 控制字体大小，content 显示对应的图标名称。当然，font-style 选择 normal，因为它是字体的默认风格。
配色方案
为了实现自己的配色方案，我们需要使用 LESS 的混合功能。可以定义一个函数来进行自定义颜色的处理。比如：
-- -------------------- ---- -------
---------- -
------ --------
--------------- -
------ -------
-- ------- ----- ----- - --------------- ----------------
------- -
------ -------
-
--------
---------
-------- -
------- ----------------
-
-
-以上代码定义了一个 .icon-card 选择器，其中通过 @color 实现颜色的自定义。可以看到，&-color(@color) 为一个函数，接收一个变量 @color 存储要使用的颜色值。在输出上，我们将 @color 赋值给 color 属性，同时让 & 代表 .icon-card 选择器。在 .icon-card-color 的辅助选择器下，可以根据自己的需求定制。
示例代码
最后，让我们通过以下示例代码来了解一下完整的使用方法：
-- -------------------- ---- -------
------
--------------- --------
--------------- --------
--------------- --------
------------- --------
-- ------
---------- -
------------ -------
---- ---------------------- -- ------- --
---- ---------------------------- ---------------------------- -- ----- ------- --
---------------------- --------------- -- -------------- --
--------------------- ------------------- -- ------------------------------------ --- --
------------------------------- -------------- -- ----- - --
-
-- ------
---------- -
------ --------
--------------- -
------ -------
------- -
------ -------
-
--------
---------
-------- -
------- ----------------
-
-
-
--------
----- -
------------ ------ -----------
---------- -----
----------- -------
-
---------- -
-------- -
-------- -------- -- ---------
-
--------------------------------- -- ----------
-
------------ -
-------- -
-------- --------
-
---------------------------------
-
--------------- -
-------- -
-------- --------
-
-------------------------------
-总结
通过 LESS 可以很简单地实现字体图标的自定义配色方案。以上代码可以作为一个模板，在使用字体图标时将它们插入到所需要的选择器中即可。
除了字体图标，我们可以使用变量、混合、循环等语法来管理更多的颜色、常量和 CSS 样式，极大地简化了前端工程师的开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64970c4948841e989443040a