如果你是一个前端开发者，你一定知道按钮是网页设计中不可或缺的组件之一。但是，如何创建一个好看的按钮一直是一个挑战。现在，我们可以使用 SASS mixin 来轻松地创建出漂亮的按钮样式。
什么是 SASS mixin？
SASS mixin 是一组带有参数的 CSS 规则集。通过使用 mixin，我们可以在样式定义中重复使用相同的样式，并在需要时通过传递参数来自定义每个使用情况的样式。
创建简单的按钮样式
让我们从创建一个简单的按钮样式开始。我们将使用 SASS 来定义 mixin。
首先，我们需要定义一个 mixin，该 mixin 将创建一个具有默认属性的按钮。
-- -------------------- ---- -------
------ ------ -
-------- -------------
-------- -----
-------------- ----
----------------- -----
------ ------
------- --------
---------------- -----
------- -
----------------- ------------ -----
-
-接下来，我们可以在我们的样式表中使用该 mixin 来创建一个按钮。
.button {
@include button;
}这将产生一个默认按钮，具有圆角边框、蓝色背景和白色文本。
但是，我们可能需要创建不同属性的按钮，例如大按钮、深色按钮等等。因此，我们需要更多的 mixin。
创建自定义按钮样式
让我们创建一个自定义按钮 mixin，该 mixin 允许指定按钮的背景颜色和文本颜色。
-- -------------------- ---- -------
------ ------------------------ ------------ -
-------- -------------
-------- -----
-------------- ----
----------------- ----------
------ ------------
------- --------
---------------- -----
------- -
----------------- ----------------- -----
-
-现在，我们可以在样式表中使用这个 mixin 来创建具有不同背景和文本颜色的自定义按钮。
-- -------------------- ---- ------- ------------ - -------- ------------------- ------- - ----------- - -------- ------------------ ------- - ------------- - -------- -------------------- ------- -
这将产生三个不同的按钮：一个蓝色的、一个红色的和一个绿色的，每个按钮都具有相同的样式，但具有不同的背景和文本颜色。
创建更多 mixin
除了背景和文本颜色之外，您还可以通过创建其他 mixin 来自定义按钮的大小、圆角半径和边框大小等属性。
-- -------------------- ---- ------- -- ------------ ----- ------ ------------------- -------- - ------ ------- ------- -------- - -- -------------- ----- ------ ---------------------- - -------------- -------- - -- ----------------- ----- ------ --------------------- ------- ------- - ------- ------ ------ ------- - -- ---- ----- -------- -------------- - -------- ------------------ ------ -------- -------------------- -------- ------------------ ------ ------- -------- ------------------- ------- -
这将创建一个自定义大小、带有圆角边缘、带有边框的蓝色按钮。
总结
通过使用 SASS mixin，我们可以轻松地创建优美的按钮样式，并且还可以通过传递参数来自定义每个使用情况的样式。您可以根据需要创建多个 mixin，以满足不同的样式要求。让我们开始使用 mixin 来创建漂亮的按钮样式吧！
示例代码：
-- -------------------- ---- -------
------ ------ -
-------- -------------
-------- -----
-------------- ----
----------------- -----
------ ------
------- --------
---------------- -----
------- -
----------------- ------------ -----
-
-
------ ------------------------ ------------ -
-------- -------------
-------- -----
-------------- ----
----------------- ----------
------ ------------
------- --------
---------------- -----
------- -
----------------- ----------------- -----
-
-
------ ------------------- -------- -
------ -------
------- --------
-
------ ---------------------- -
-------------- --------
-
------ --------------------- ------- ------- -
------- ------ ------ -------
-
------- -
-------- -------
-
------------ -
-------- ------------------- -------
-
----------- -
-------- ------------------ -------
-
------------- -
-------- -------------------- -------
-
-------------- -
-------- ------------------ ------
-------- --------------------
-------- ------------------ ------ -------
-------- ------------------- -------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cdb7f61519ea946c186a30