Tabs 切换是一个非常常见的前端 UI 组件，其具有良好的用户交互体验，可以方便地切换内容，被广泛应用于网站和应用程序中。今天我们将使用 LESS mixin 来实现一个可复用的 Tabs 切换效果，以方便我们在多个项目中复用。
什么是 LESS mixin
LESS 是一种 CSS 预处理器，它可以将 CSS 语法进行扩展，提供了许多便捷的语法和功能，使得样式代码更为灵活和高效。其中一个重要的功能就是 mixin，即混入，可以将一组样式代码封装并复用，从而减少代码冗余和提高可维护性。
实现思路
我们将使用 LESS mixin 来实现 Tabs 切换效果，具体实现思路如下：
- 定义 Tabs 容器和 Tabs 标签页的样式；
- 定义一个 mixin，用于实现 Tabs 切换效果；
- 在 HTML 中添加 Tabs 容器和 Tabs 标签页元素；
- 在 LESS 中调用 mixin，实现 Tabs 切换效果。
详细步骤
1. 定义 Tabs 容器和 Tabs 标签页的样式
-- -------------------- ---- -------
--------------- -
-------- -----
--------------- -------
-
------------ -
-------- -----
---------------- --------------
------------ -------
----------------- --------
-------- -----
-
---- -
------- --------
-------- -----
-------------- --- --- - --
-------- -
----------------- -----
-------------- -----
-
-
------------ -
-------- -----
-上述代码定义了 Tabs 容器和 Tabs 标签页的基本样式，其中，.tabs-container 是 Tabs 容器的样式，.tabs-header 是 Tabs 标签页容器的样式，.tab 是每个 Tabs 标签页的样式，.active 是选中的 Tabs 标签页的样式，.tab-content 是 Tabs 标签页内容的样式。
2. 定义一个 mixin，用于实现 Tabs 切换效果
-- -------------------- ---- -------
----------------------- --------------- ------------------- ---------------- -
------------ -
----------------- -----------
-
---- -
------- -
----------------- --------
-
-------- -
----------------- ---------------
-------------- -------------------
-
-
------------ -
----------------- ----------------
-------- -----
-------- -
-------- ------
-
-
-上述代码定义了一个名为 .tab-switch 的 mixin，它接收四个参数：@header-bg，@active-tab-bg，@active-tab-border 和 @tab-content-bg 分别表示 Tabs 标签页容器背景颜色、选中的 Tabs 标签页背景颜色、选中的 Tabs 标签页下边框和 Tabs 标签页内容的背景颜色。
在 mixin 中，我们首先定义了 Tabs 容器和 Tabs 标签页的样式，然后在 .tab 中，我们定义了鼠标悬停和选中状态的样式，.tab-content 中，我们定义了选中状态下 Tab 标签页的内容样式。
3. 在 HTML 中添加 Tabs 容器和 Tabs 标签页元素
-- -------------------- ---- -------
---- -----------------------
---- --------------------
---- ---------- ----------- -------
---- --------------- -------
---- --------------- -------
------
---- ------------------ --------------- -------
---- --------------------------- -------
---- --------------------------- -------
------上述代码为 HTML 中添加了 Tabs 容器和 Tabs 标签页元素，其中，.tabs-container 是 Tabs 容器；.tabs-header 是 Tabs 标签页容器；.tab 是每个 Tabs 标签页元素，active 表示当前选中的 Tabs 标签页；.tab-content 是 Tabs 标签页内容元素。
4. 在 LESS 中调用 mixin，实现 Tabs 切换效果
.tabs {
.tab-switch(#f5f5f5, #FFF, none, #e5e5e5);
}上述代码为 .tabs-container 添加了一个 .tabs class，并在其中调用了之前定义的 .tab-switch mixin，并传入了相应的参数。
示例代码
下面是完整的示例代码：
HTML：
-- -------------------- ---- -------
---- -----------------------
---- --------------------
---- ---------- ----------- -------
---- --------------- -------
---- --------------- -------
------
---- ------------------ --------------- -------
---- --------------------------- -------
---- --------------------------- -------
------LESS：
-- -------------------- ---- -------
--------------- -
-------- -----
--------------- -------
----- -
-------------------- ----- ----- ---------
-
-
------------ -
-------- -----
---------------- --------------
------------ -------
----------------- --------
-------- -----
-
---- -
------- --------
-------- -----
-------------- --- --- - --
-------- -
----------------- -----
-------------- -----
-
-
------------ -
-------- -----
-总结
通过使用 LESS Mixin，我们成功地实现了一个可复用的 Tabs 切换效果。通过这个示例，我们可以了解到 LESS 的 mixin 功能，以及如何使用 LESS mixin 来开发复用性强的 UI 组件。这对于前端开发者来说，可以大大提高代码的可维护性和加快开发速度，使开发工作更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f5e8d968c7c53b0165c24