在 Less 中，Mixins 是一种将一组 CSS 属性规则集传递给另一个选择器的技术。这可以让你更高效地重用代码，避免重复，并且使你的样式表更加简洁和易于维护。
使用 Mixins
基本用法
使用 Mixins 的基本方式是将一个类名作为属性添加到另一个选择器中。例如，如果你有一个名为 .button 的 Mixin，你可以将其应用到其他任何需要相同样式的元素上。
-- -------------------- ---- ------- ------- - -------- ----- -------------- ---- ----------------- -------- ------ ------ - ----- - -------- -- -- ------- ----- -
编译后的 CSS 可能如下所示：
.link {
padding: 10px;
border-radius: 5px;
background-color: #007bff;
color: white;
}参数化 Mixins
Less 支持参数化的 Mixins，这意味着你可以根据需要向 Mixins 传递参数，就像你在函数中传递参数一样。
-- -------------------- ---- -------
----------------------- -
---------------------- --------
------------------- --------
-------------- --------
-
---- -
------ ------
------- ------
--------------------- -- ----
-编译后的 CSS 可能如下所示：
.box {
width: 100px;
height: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}带默认值的 Mixins
你还可以为参数设置默认值，这样在调用时如果未提供该参数，则会使用默认值。
-- -------------------- ---- -------
----------------------- ---- -
---------------------- --------
------------------- --------
-------------- --------
-
----- -
------ ------
------- ------
----------------- -- -----
-
----- -
------ ------
------- ------
--------------------- -- ---------
-编译后的 CSS 可能如下所示：
-- -------------------- ---- -------
----- -
------ ------
------- ------
---------------------- ----
------------------- ----
-------------- ----
-
----- -
------ ------
------- ------
---------------------- -----
------------------- -----
-------------- -----
-包含 Mixins
Less 还允许你通过 :include 关键字来包含 Mixins，从而在输出 CSS 时保留 Mixins 的名称。
-- -------------------- ---- -------
----------------------- -
---------------------- --------
------------------- --------
-------------- --------
-
---- -
------ ------
------- ------
--------- ---------------------
-编译后的 CSS 可能如下所示：
.box {
width: 100px;
height: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}使用 Mixins 来创建变量
你也可以使用 Mixins 来定义变量，然后在其他地方引用这些变量。
-- -------------------- ---- ------- ---------------------- - -------- ----- -------------- ---- ----------------- ------- ------ ------ - --------------- - ------------------------ - ----------------- - ------------------------ -
编译后的 CSS 可能如下所示：
-- -------------------- ---- ------- --------------- - -------- ----- -------------- ---- ----------------- -------- ------ ------ - ----------------- - -------- ----- -------------- ---- ----------------- -------- ------ ------ -
通过这些示例，你应该能够理解如何在 Less 中有效地使用 Mixins。这不仅使你的代码更加模块化和可维护，还提高了代码的复用性。你可以根据项目需求灵活运用 Mixins，以实现更高效、优雅的 CSS 编写方式。