在前端开发中，我们经常需要实现消息提示框的功能，而这个功能通常需要涉及多种样式以及交互效果。为了避免样式冗余和代码重复，我们可以使用 LESS 中的 mixin 技术来实现消息提示框的样式抽象化，从而使得代码更加简洁、易维护并且具有可复用性。
LESS mixin 是什么？
LESS mixin 是一种将样式集合成一个函数进行复用的技术。它类似于编程语言中的函数，可以接收参数并返回样式值。
LESS mixin 通过 @mixin 和 @include 两个指令来实现。其中，@mixin 定义了样式函数，而 @include 调用样式函数。
下面是一个简单的 LESS mixin 示例：
@mixin text-center {
text-align: center;
}
h1 {
@include text-center;
}上面的代码中，我们定义了一个名为 text-center 的 mixin，它将 text-align: center; 样式值集合成了一个函数。在之后的样式代码中，我们可以使用 @include 指令来调用这个函数，从而实现了文本水平居中的效果。
使用 LESS mixin 实现消息提示框
在实现消息提示框时，我们需要考虑以下几个方面的样式：
- 背景颜色。
- 边框样式及边框颜色。
- 文本颜色和大小。
- 动画效果。
下面我们来使用 mixin 来实现这些样式的抽象化。
首先，我们需要定义一个 mixin，用来设置消息提示框的基本样式：
-- -------------------- ---- ------- ------ ----------------- - ----------------- ----- ------- --- ----- ----- ------ ----- ---------- ----- -------- ----- --------- --------- ----------- ----- ----------- --- --- ----- -
在上面的代码中，我们定义了一个名为 notification-base 的 mixin，它设置了消息提示框的基本样式，包括背景颜色、边框样式及边框颜色、文本颜色和大小、内边距、位置、文本水平对齐方式以及过渡动画。
接下来，我们可以通过调用 notification-base 来定义具体的消息提示框样式：
-- -------------------- ---- ------- -------- - -------- ------------------ ----------------- -------- ------------- -------- ------ -------- - -------- - -------- ------------------ ----------------- -------- ------------- -------- ------ -------- -
在上面的代码中，我们分别定义了两个消息提示框样式，warning 和 success，它们分别调用了 notification-base 并设置了自己的背景颜色、边框样式及边框颜色、文本颜色。
最后，我们可以对消息提示框进行动画效果的处理：
-- -------------------- ---- -------
------ ---------------------------------- -
-------------------- -
---------- -------------------------- -- ------------ -------- ----------
-------- --
-
--------------------------- -
---------- --------------
-------- --
----------- --- --- -----
-
------------------- -
-------- --
-
-------------------------- -
---------- -------------------------- -- ------------ ------- -----------
-------- --
----------- --- --- -----
-
-
-------- -
-------- ------------------
----------------- --------
------------- --------
------ --------
-------------
------------------- -
-------- ----------------------------------
-
-
-------- -
-------- ------------------
----------------- --------
------------- --------
------ --------
-------------
------------------- -
-------- -----------------------------------
-
-在上面的代码中，我们首先定义了一个名为 notification-animation 的 mixin，它定义了消息提示框的进出动画效果。其中，$direction 参数用于定义动画的方向。
接下来，我们在 warning 和 success 样式中，添加了 fade-enter 和 fade-leave-active 类名，并调用了 notification-animation 来实现消息提示框的进出动画效果。
示例代码
-- -------------------- ---- -------
------ ----------------- -
----------------- -----
------- --- ----- -----
------ -----
---------- -----
-------- -----
--------- ---------
----------- -----
----------- --- --- -----
-
------ ---------------------------------- -
-------------------- -
---------- -------------------------- -- ------------ -------- ----------
-------- --
-
--------------------------- -
---------- --------------
-------- --
----------- --- --- -----
-
------------------- -
-------- --
-
-------------------------- -
---------- -------------------------- -- ------------ ------- -----------
-------- --
----------- --- --- -----
-
-
-------- -
-------- ------------------
----------------- --------
------------- --------
------ --------
-------------
------------------- -
-------- ----------------------------------
-
-
-------- -
-------- ------------------
----------------- --------
------------- --------
------ --------
-------------
------------------- -
-------- -----------------------------------
-
-总结
通过使用 LESS mixin 技术来实现消息提示框的样式抽象化，我们可以使代码更加简洁、易维护并且具有可复用性。同时，LESS mixin 还可以用于其他样式的抽象化，例如按钮样式、表单样式等等。因此，掌握 LESS mixin 技术是前端开发人员必须掌握的技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f6c93968c7c53b01725f6