Sass/LESS中CSSImport使用教程

哈喽！今天心血来潮给大家带来了《Sass/LESS中CSS Import用法详解》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

推荐使用预处理器的@use或@import在编译阶段合并文件，避免CSS的@import导致运行时请求；Sass优先用@use导入模块化文件如_variables.scss，Less用@import加选项控制行为，均需正确配置路径并防止重复引入。

在 Sass 或 Less 中引入外部样式文件，不推荐使用 CSS 的 @import 语法，因为它的性能较差，且会在运行时发起额外的 HTTP 请求（尤其是在旧版浏览器中）。现代做法是在预处理器层面使用其原生的 @import 指令，它会在编译阶段将文件合并，生成单一的 CSS 文件。

1. 使用 Sass 引入样式文件

Sass 支持 @import 和 @use（Sass 1.23.0+ 推荐方式）来引入其他 Sass 文件。

例如：

@use 'variables';
@use 'mixins';
@use 'base'; // 会自动查找 _base.scss

Sass 会优先加载以 _ 开头的文件（如 _base.scss），这类文件称为“部分文件”，不会单独输出为 CSS 文件。

• 确保文件路径正确，相对路径或配置了 includePaths 的路径都可使用。
• @use 是模块化导入，变量需通过命名空间访问（如 variables.$primary-color）。
• 若想兼容旧写法，仍可用 @import，但官方已标记为弃用。

2. 使用 Less 引入样式文件

Less 使用 @import 指令来合并样式文件，支持多种选项控制行为。

基本语法：

@import 'base.less';
@import 'themes/dark';
@import (less) 'style.css'; // 强制将 .css 当作 Less 解析

• (less)：即使文件是 .css 也按 Less 解析。
• (css)：强制作为纯 CSS 引入，不会被编译进输出内容，仅生成 @import url(...) 语句。
• (once)：默认行为，同一文件只导入一次。
• (multiple)：允许重复导入，用于 mixin 多次注入场景。

例如，你想把一个 CSS 文件真正“内联”进输出结果，而不是生成 @import：

@import (less) 'normalize.css';

3. 路径处理与最佳实践

无论 Sass 还是 Less，建议：

• 使用相对路径或配置构建工具（如 Webpack）的 includePaths 简化引用。
• 将可复用的变量、mixin 放在单独文件，并以 _ 开头（Sass）或约定命名（Less）。
• 避免在多个地方重复引入相同文件，防止样式重复。
• 不要用原生 CSS 的 @import url(...) 在 Sass/Less 中引入本地文件，它无法在编译期处理。

基本上就这些。关键是理解预处理器的 @import 或 @use 是编译时合并，而 CSS 的 @import 是运行时加载，两者完全不同。用对了才能发挥打包优势。不复杂但容易忽略。

到这里，我们也就讲完了《Sass/LESS中CSSImport使用教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于sass,Less,@import,@use,编译时合并的知识点！