前言
LESS 是一种预处理器语言，它使得 CSS 代码更加模块化、结构化，让前端开发变得更加高效。LESS 的一项重要功能就是 mixin，通过 mixin 可以将某些常用的 CSS 样式封装成一个函数一样的东西，方便在需要的地方进行调用。但其实，不需要使用 LESS ，我们也可以在原生 CSS 中实现 mixin，本文将详细介绍这个增强用法。
实现原理
LESS 中的 mixin 实现原理就是通过 @mixin 相关指令定义一个可以被调用的代码块，使用的时候通过 @include 相关指令来将这个代码块插入到当前作用域中。我们可以将其转化为原生 CSS 中的一个通用选择器：
-------------------- -
-- -- --
-通过在 HTML 中添加对应的 data-mixin 属性，就可以实现 mixin 的功能。
示例
下面就来看两个例子。
案例一
在 LESS 中，我们可以通过以下代码定义一个 mixin：
----------------------- -
---------------------- --------
------------------- --------
------------------ --------
-------------- --------
-然后通过 @include 来调用：
---- -
--------------------
-而在原生 CSS 中，我们可以定义一个通用选择器：
---------------------------- -
---------------------- ------------------
------------------- ------------------
------------------ ------------------
-------------- ------------------
-然后在 HTML 中添加对应的 data-mixin 属性即可：
---- ----------- -------------------------- ------------------------
案例二
在 LESS 中，我们还可以通过以下代码定义另一个 mixin：
----------------------- ----------- -
----------------- -------------
----------------- ------------------------ ---- ---- ---- ------- ------------------- ----------------
----------------- ---------------------------- ------------- ------------
----------------- ------------------------- ------------- ------------
----------------- ------------------------ ------------- ------------
----------------- ----------------------- ------------- ------------
----------------- -------------------- ------------- ------------
-然后通过 @include 来调用：
---- -
------------------ ---------
-而在原生 CSS 中，我们可以定义一个通用选择器：
----------------------- -
----------------- -----------------
----------------- ------------------------ ---- ---- ---- ------- ----------------------- --------------------
----------------- ---------------------------- ----------------- ----------------
----------------- ------------------------- ----------------- ----------------
----------------- ------------------------ ----------------- ----------------
----------------- ----------------------- ----------------- ----------------
----------------- -------------------- ----------------- ----------------
-然后在 HTML 中添加对应的 data-mixin 属性即可：
---- ----------- --------------------- -------------------- -------------------------
总结
通过上面的例子可以看出，我们通过通用选择器和属性来实现原生 CSS 中的 mixin，不仅可以降低对预处理器语言的依赖，还可以更好地理解 mixin 的本质，对于一些场景，也可以提供更加灵活的解决方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6499365b48841e989462e1bb