Less 导入 #

@import 指令允许你将多个 Less 文件合并为一个 CSS 文件，实现样式的模块化管理。

基本用法 #

导入 Less 文件 #

less 
// 导入 variables.less
@import "variables";

// 导入 mixins.less
@import "mixins.less";

// 使用导入的变量和 Mixin
.box {
  color: @primary-color;
  .border-radius(4px);
}

导入 CSS 文件 #

less 
// 导入 CSS 文件（不会被处理）
@import "reset.css";

// 导入外部 CSS
@import url("https://cdn.example.com/styles.css");

导入选项 #

Less 提供了多种导入选项来控制导入行为：

@import (reference) #

只导入被使用的样式，不输出未使用的规则：

less 
// _buttons.less
.btn {
  padding: 8px 16px;
  border-radius: 4px;
}

.btn-primary {
  background: #007bff;
}

.btn-secondary {
  background: #6c757d;
}

// main.less
@import (reference) "_buttons.less";

// 只使用 btn-primary
.my-button {
  &:extend(.btn-primary);
}

编译结果：

css 
// 只输出被使用的样式
.my-button {
  background: #007bff;
}

@import (inline) #

将文件内容原样输出，不进行处理：

less 
// 导入不兼容 Less 语法的 CSS 文件
@import (inline) "legacy.css";

@import (less) #

将文件作为 Less 文件处理，无论扩展名：

less 
// 将 .css 文件作为 Less 处理
@import (less) "variables.css";

@import (css) #

将文件作为 CSS 文件处理，保持 @import 语句：

less 
// 保持 @import 语句不变
@import (css) "theme.css";

// 编译结果：@import "theme.css";

@import (once) #

只导入一次（默认行为）：

less 
// 即使多次导入，也只处理一次
@import (once) "variables.less";
@import (once) "variables.less";  // 被忽略

@import (multiple) #

允许多次导入同一文件：

less 
@import (multiple) "theme.less";
@import (multiple) "theme.less";  // 会再次导入

@import (optional) #

文件不存在时不报错：

less 
// 如果 optional-file.less 不存在，不报错
@import (optional) "optional-file.less";

组合选项 #

可以组合多个选项：

less 
@import (reference, optional) "maybe-exists.less";
@import (inline, css) "external.css";

文件扩展名处理 #

省略扩展名 #

less 
// 以下写法等效
@import "variables";
@import "variables.less";

导入顺序 #

Less 按以下顺序查找文件：

  1. 指定路径的文件
  2. 添加 .less 扩展名
  3. 如果是 CSS 文件，保持原样

模块化组织 #

目录结构 #

text 
styles/
├── main.less           // 主入口文件
├── variables.less      // 变量定义
├── mixins.less         // Mixin 定义
├── reset.less          // 重置样式
├── base/
│   ├── typography.less // 排版样式
│   └── forms.less      // 表单样式
├── components/
│   ├── buttons.less    // 按钮组件
│   ├── cards.less      // 卡片组件
│   └── modals.less     // 模态框组件
├── layouts/
│   ├── header.less     // 页头布局
│   ├── footer.less     // 页脚布局
│   └── sidebar.less    // 侧边栏布局
└── utilities/
    ├── spacing.less    // 间距工具类
    └── text.less       // 文本工具类

主入口文件 #

less 
// main.less

// 1. 变量和配置
@import "variables.less";
@import "mixins.less";

// 2. 重置和基础样式
@import "reset.less";
@import "base/typography.less";
@import "base/forms.less";

// 3. 布局
@import "layouts/header.less";
@import "layouts/footer.less";
@import "layouts/sidebar.less";

// 4. 组件
@import "components/buttons.less";
@import "components/cards.less";
@import "components/modals.less";

// 5. 工具类
@import "utilities/spacing.less";
@import "utilities/text.less";

变量文件 #

less 
// variables.less

// 颜色
@color-primary: #007bff;
@color-secondary: #6c757d;
@color-success: #28a745;
@color-danger: #dc3545;
@color-warning: #ffc107;
@color-info: #17a2b8;

// 字体
@font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
@font-size-base: 16px;
@line-height-base: 1.5;

// 间距
@spacing-unit: 8px;

// 断点
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;

Mixin 文件 #

less 
// mixins.less

.clearfix() {
  &::before,
  &::after {
    content: "";
    display: table;
  }
  &::after {
    clear: both;
  }
}

.text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用变量路径 #

less 
@themes: "../../src/themes";

@import "@{themes}/dark.less";
@import "@{themes}/light.less";

条件导入 #

less 
@theme: dark;

& when (@theme = dark) {
  @import "themes/dark.less";
}

& when (@theme = light) {
  @import "themes/light.less";
}

导入 vs @use #

Less 使用 @import，而 Sass 使用 @use。Less 的 @import 会将所有内容导入到全局命名空间。

命名空间模拟 #

less 
// _variables.less
@colors: {
  primary: #007bff;
  secondary: #6c757d;
};

// main.less
@import "_variables.less";

.button {
  background: @colors[primary];
}

最佳实践 #

使用下划线前缀 #

less 
// 使用 _ 前缀表示部分文件
@import "_variables.less";
@import "_mixins.less";

分离关注点 #

less 
// 按功能分离
@import "variables.less";    // 变量
@import "mixins.less";       // Mixin
@import "functions.less";    // 函数
@import "base.less";         // 基础样式
@import "components.less";   // 组件样式

使用 reference 避免重复 #

less 
// 只导入需要的样式
@import (reference) "bootstrap.less";

.my-button {
  &:extend(.btn);
  &:extend(.btn-primary);
}

控制导入顺序 #

less 
// 正确顺序
@import "variables.less";  // 1. 变量（最先）
@import "mixins.less";     // 2. Mixin（依赖变量）
@import "base.less";       // 3. 基础样式
@import "components.less"; // 4. 组件（依赖前面）

常见问题 #

循环导入 #

避免文件相互导入：

less 
// 错误：a.less 导入 b.less，b.less 又导入 a.less

// 正确：提取公共部分到单独文件
// _common.less -> a.less, b.less

变量覆盖 #

less 
// variables.less
@primary: blue;

// custom.less
@primary: red;

// main.less
@import "variables.less";
@import "custom.less";

.box {
  color: @primary;  // red（后导入的覆盖）
}

下一步 #

现在你已经掌握了导入，接下来学习 继承 来优化 CSS 输出！

最后更新：2026-03-28