Less - 导入

LESS - 导入文件

描述

LESS 中的 @import 规则（at-rule）允许你将一个 LESS 或 CSS 文件的内容包含到另一个文件中。这对于将样式表组织成可管理的模块（manageable modules）、提高可重用性（reusability）和可维护性（maintainability）至关重要。当你导入一个 .less 文件时，其中的变量（variables）、混入（mixins）和规则（rules）在导入文件中变得可用。导入普通的 .css 文件会将它们作为标准 CSS @import 规则包含进来。

默认情况下，LESS 会处理 @import 语句，直接合并（merging）导入的代码。LESS 文件的文件扩展名（File extensions）（.less）是可选的。

示例：现代本地文件导入

让我们考虑一种常见的项目结构，其中样式被模块化：

项目结构：

my-project/
├── index.html
├── css/ (compiled CSS will go here)
└── less/
    ├── style.less      (main file)
    ├── _variables.less (variables, prefixed with _ as a convention for partials)
    └── _base.less      (base styles, partial)

index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LESS Importing Example</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Understanding LESS Imports</h1>
    </header>
    <main>
        <p class="main-text">This paragraph uses styles imported from a base file.</p>
        <p class="highlight-text">This paragraph has a highlight color defined by an imported variable.</p>
    </main>
</body>
</html>

less/_variables.less 文件：

// 定义可重用变量
@primary-color: #3498db;
@secondary-color: #e74c3c;
@text-font-stack: Helvetica, Arial, sans-serif;
@base-font-size: 16px;

less/_base.less 文件：

// HTML 元素的基本样式
body {
    font-family: @text-font-stack;
    font-size: @base-font-size;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
}

.main-text {
    line-height: 1.6;
}

less/style.less 文件（主 LESS 文件）：

// 先导入变量，以便其他导入和规则可以使用它们
@import "_variables"; // .less 扩展名是可选的

// 导入基本样式
@import "_base.less"; // .less 扩展名可以显式指定

// style.less 特有的样式
header {
    background-color: @primary-color;
    color: white;
    padding: 1em 0;
    text-align: center;
    margin-bottom: 20px;
}

.highlight-text {
    color: @secondary-color;
    font-weight: bold;
    border-left: 3px solid @secondary-color;
    padding-left: 10px;
}

要将 style.less 编译为 css/style.css，可以使用 LESS 编译器（假设在 Node.js 环境下）：

npm install -g less
lessc less/style.less css/style.css

这个命令会将 less/style.less（包括其导入的文件）编译到 css/style.css。

编译后的 css/style.css 文件：

/* 从 less/_variables.less, less/_base.less 和 less/style.less 编译而来 */
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
  color: #333;
}
.main-text {
  line-height: 1.6;
}
header {
  background-color: #3498db;
  color: white;
  padding: 1em 0;
  text-align: center;
  margin-bottom: 20px;
}
.highlight-text {
  color: #e74c3c;
  font-weight: bold;
  border-left: 3px solid #e74c3c;
  padding-left: 10px;
}

导入选项

LESS 提供了几种选项来控制文件如何导入：

@import (reference) “file.less”;：导入该 LESS 文件，但除非被 extend 或 mixin 使用，否则其选择器不会输出。被 reference 的文件中的变量和 mixin 可用。
@import (inline) “file.css”;：按原样将源文件包含在输出中，不进行处理。适用于不应被 LESS 解析的 CSS 文件。
@import (less) “file.txt”;：无论导入的文件扩展名是什么，都将其视为 LESS 文件。
@import (css) “file.less”;：将导入的文件视为 CSS 文件，并将其作为标准 CSS @import 规则输出。
@import (once) “file.less”;（默认值）：确保文件只被导入一次。后续导入相同文件将被忽略。
@import (multiple) “file.less”;：允许同一文件被多次导入，并在输出中重复其内容。
@import (optional) “non-existent-file.less”;：如果 optional 导入的文件未找到，可防止编译错误。

导入远程文件和 CSS 文件

你也可以导入远程 LESS 文件或标准 CSS 文件：

// 导入远程 LESS 文件（本地开发中较少见）
// @import (less) "http://example.com/styles/theme.less";

// 导入标准 CSS 文件（将作为 CSS @import 输出）
@import (css) "normalize.css";

// 导入一个由 LESS 处理的 CSS 文件（如果它包含 LESS 兼容语法，或者你想在 LESS 操作中使用其内容）
// @import (less) "bootstrap-grid.css";

导入文件的最佳实践：

将你的 LESS 文件组织成逻辑模块（例如，变量、基础样式、组件、布局）。
使用一个主 LESS 文件（例如，style.less）来导入所有其他局部文件（partials）。
对于不直接编译的局部文件（partials），文件名通常以 underscores 开头（例如，_variables.less、_forms.less）。这是一个常见的约定，LESS 本身并不强制要求。
在使用变量和混入的文件之前，先导入它们的定义。

理解 @import 的工作原理对于使用 LESS 构建可扩展的（scalable）和可维护的样式表（maintainable stylesheets）至关重要。有关更多详细信息，请参阅 LESS 官方文档关于导入的部分。