LESS 是一种 CSS 预处理器，它扩展了 CSS 语法，使得我们能够写出更优雅、更便于维护的样式代码。其中一个非常强大的功能就是 @extend 指令，它可以将一个选择器的样式继承到另一个选择器上，从而实现样式代码的复用和减少冗余。本文将详解 LESS 中的 @extend 指令，包括使用方法、注意事项和示例代码。
使用方法
@extend 指令的基本语法如下：
.selector {
property: value;
&:extend(.other-selector);
}其中，.selector 表示当前选择器，property: value 表示当前选择器的样式属性和值，&:extend(.other-selector); 表示将 .selector 的样式继承到 .other-selector 上。
例如，下面的 LESS 代码定义了两个选择器 .btn 和 .btn-primary，其中 .btn-primary 继承了 .btn 的样式：
-- -------------------- ---- ------- ---- - ------- --- ----- ----- -------- --- ----- ---------- ----- - ------------ - ------ ----- ----------------- -------- --------------- -
在生成的 CSS 中，.btn-primary 将继承 .btn 的所有样式：
-- -------------------- ---- ------- ---- - ------- --- ----- ----- -------- --- ----- ---------- ----- - ------------ - ------ ----- ----------------- -------- ------- --- ----- ----- -------- --- ----- ---------- ----- -
注意事项
使用 @extend 指令时需要注意以下几点：
- @extend 指令只能用在当前选择器内部。
- 继承的样式不能包含后代选择器。
- 继承的样式不能包含属性插值、变量、mixin 等。
- 继承的样式的顺序决定了生成的 CSS 的顺序。
- 某些情况下会生成额外的 CSS，导致代码冗余，需要谨慎使用。
例如，下面的 LESS 代码中使用了错误的 @extend 指令：
-- -------------------- ---- ------- ---- - ------- --- ----- ----- -------- --- ----- ---------- ----- - ------------ - ------ ----- ----------------- -------- ------------- ------ -- ----- -
上面的代码中，.btn-primary 继承了 .btn span 的样式，但 .btn 中并没有包含 span，因此这个继承是无效的。
示例代码
下面是一个实际的 LESS 代码示例，用于演示 @extend 指令的用法：
-- -------------------- ---- -------
-- ------
---- -
------- --- ----- -----
-------- --- -----
---------- -----
-
-- --------
------------ -
------ -----
----------------- --------
------- -
----------------- --------
-
------- -
----------- - - - ------ -------- ---- ---- -----
-
-
-------------- -
------ -----
----------------- --------
------- -
----------------- --------
-
------- -
----------- - - - ------ --------- ---- ---- -----
-
-
-- -- ------- ------
----------- -
------ -----
----------------- --------
------- -
----------------- --------
-
------- -
----------- - - - ------ --------- --- --- -----
-
---------------
-
------------ -
------ -----
----------------- --------
------- -
----------------- --------
-
------- -
----------- - - - ------ -------- ---- --- -----
-
---------------
-在生成的 CSS 中，.btn-danger 和 .btn-success 将继承 .btn 的所有基本样式，同时也拥有自己的颜色样式：
-- -------------------- ---- ------- ---- - ------- --- ----- ----- -------- --- ----- ---------- ----- - ------------ - ------ ----- ----------------- -------- - ------------------ - ----------------- -------- - ------------------ - ----------- - - - ------ -------- ---- ---- ----- - -------------- - ------ ----- ----------------- -------- - -------------------- - ----------------- -------- - -------------------- - ----------- - - - ------ --------- ---- ---- ----- - ----------- - ------ ----- ----------------- -------- ------- --- ----- ----- -------- --- ----- ---------- ----- - ----------------- - ----------------- -------- - ----------------- - ----------- - - - ------ --------- --- --- ----- - ------------ - ------ ----- ----------------- -------- ------- --- ----- ----- -------- --- ----- ---------- ----- - ------------------ - ----------------- -------- - ------------------ - ----------- - - - ------ -------- ---- --- ----- -
通过使用 @extend 指令，我们可以轻松地实现样式代码的复用和减少冗余，提高前端开发效率和代码可维护性。同时，在使用 @extend 指令时也需要注意一些细节，避免出现代码错误和冗余。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d7fbdfa941bf7134e41dad