LESS 是一种 CSS 预处理语言，提供了很多方便的功能，其中 Mixin 是很有用的一种函数。Mixin 实际上就是一段可以重复调用的代码片段，可以被其他样式引用。本文将介绍在 LESS 中常用的 Mixin 函数，并给出示例代码和使用建议。
1. Border-radius Mixin
----------------------- - ---------------------- -------- ------------------- -------- -------------- -------- -
这个 Mixin 用于设置圆角，其中 @radius 参数为圆角半径。上面的代码生成的 CSS 如下：
-------------- - ---------------------- ---- ------------------- ---- -------------- ---- -
使用这个 Mixin 的语法如下：
-------- - -------------------- -
输出：
-------- - ---------------------- ---- ------------------- ---- -------------- ---- -
2. Text-shadow Mixin
--------------------- - ------------ -------- --------------- -------- ---------------- -------- ----------------- -------- -------------------- -------- -
这个 Mixin 用于设置文本阴影，其中 @shadow 参数为阴影值。可以根据需要增加前缀以兼容不同浏览器。上面的代码生成的 CSS 如下：
------------ - ------------ --- --- --- ----- --------------- --- --- --- ----- ---------------- --- --- --- ----- ----------------- --- --- --- ----- -------------------- --- --- --- ----- -
使用这个 Mixin 的语法如下：
--------- - ---------------- --- --- ------ -
输出：
--------- - ------------ --- --- --- ----- --------------- --- --- --- ----- ---------------- --- --- --- ----- ----------------- --- --- --- ----- -------------------- --- --- --- ----- -
3. Box-shadow Mixin
-------------------- - ---------------- -------- ------------------- -------- ----------- -------- -
这个 Mixin 用于设置盒子阴影，其中 @shadow 参数为阴影值。可以根据需要增加前缀以兼容不同浏览器。上面的代码生成的 CSS 如下：
----------- - ---------------- --- --- --- ----- ------------------- --- --- --- ----- ----------- --- --- --- ----- -
使用这个 Mixin 的语法如下：
----- - --------------- --- --- ------ -
输出：
----- - ---------------- --- --- --- ----- ------------------- --- --- --- ----- ----------- --- --- --- ----- -
4. Transition Mixin
------------------ - ------------------- ------ ---------------- ------ -------------- ------ --------------- ------ ----------- ------ -
这个 Mixin 用于设置 CSS3 过渡动画，其中 @args 参数为属性与时间值。可以根据需要增加前缀以兼容不同浏览器。上面的代码生成的 CSS 如下：
----------- - ------------------- --- ---- --------- ---------------- --- ---- --------- -------------- --- ---- --------- --------------- --- ---- --------- ----------- --- ---- --------- -
使用这个 Mixin 的语法如下：
------- - --------------- ---- ---------- -
输出：
------- - ------------------- --- ---- --------- ---------------- --- ---- --------- -------------- --- ---- --------- --------------- --- ---- --------- ----------- --- ---- --------- -
结论
Mixin 函数是 LESS 中很有用的功能。通过定义常用的代码片段，可以避免重复劳动，增加代码可读性和减少出错机会。通过使用 LESS 的 Mixin 函数，可以提高前端开发效率，实现更好的代码重用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6722d83c2e7021665e0d2466