LESS 的 @import 和 @extend 用法详解
在前端开发中，CSS 是必不可少的一部分，而 LESS 是一款 CSS 预处理器，使得编写 CSS 变得更为便捷和高效。LESS 支持使用 @import 和 @extend 两种方式来组织和使用样式，在本文中我们将详细介绍这两种方式的用法。
@import
@import 是 LESS 中用来导入样式的方法，它的语法如下：
@import "file.less";
你可以在 LESS 文件中使用 @import 导入其他 LESS 文件，以便将代码分为多个文件进行管理。例如，如果我们有一个名为 "common.less" 的文件，它包含了一些通用样式，我们可以在其他 LESS 文件中导入它，如下所示：
@import "common.less";
这种方式使得代码更加模块化，可以更方便地管理和维护代码。
@extend
@extend 是 LESS 中用来继承样式的方法，它的语法如下：
.class {
color: red;
}
.new-class {
&:extend(.class);
}上面的代码中，我们定义了一个名为 ".class" 的样式，它有红色的字体颜色。接着我们定义了一个新的样式 ".new-class"，并使用 &:extend(.class) 将 ".class" 样式的属性继承过来，这样 ".new-class" 样式就拥有了红色的字体颜色。
这种方式可以避免编写冗余代码，同时也使得代码更易于维护和更新。
补充说明
在使用 @extend 继承样式时，还可以在继承的同时添加新的属性或者覆盖继承的属性，具体语法如下：
.class {
color: red;
}
.new-class {
&:extend(.class);
font-size: 14px;
color: blue;
}上面的代码中，我们在 ".new-class" 样式中继承了 ".class" 样式，同时添加了一个新的属性 "font-size"，并将原本的红色字体颜色改为了蓝色。
总结
通过使用 @import 和 @extend 两种方式，我们可以将 CSS 代码进行模块化组织和继承，从而提高代码的可维护性和可读性。在编写 LESS 代码时，应该合理运用这些特性，以达到高效编码的目的。
示例代码
下面是一个简单的示例代码，演示了如何使用 @import 和 @extend：
common.less：
-- -------------------- ---- -------
------- -
------- --- ----- -----
-------- -----
-
-------- -
------------------
----------------- --------
------ -----
-index.less：
-- -------------------- ---- -------
------- --------------
------- -
----- -
------ ------
------- -----
----------------- ----------------
-
-
------- -
------------------
----------------- --------
------ -----
-编译后的 CSS：
-- -------------------- ---- -------
--------
---------
------- -
------- --- ----- -----
-------- -----
-
-------- -
----------------- --------
------ -----
-
------- ----- -
------ ------
------- -----
----------------- ----------------
-
------- -
----------------- --------
------ -----
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659dc220add4f0e0ff6f5e88