导入与模块化

模块化拆分 CSS 文件，提高代码可维护性。

Sass @import

基本用法

// _variables.scss
$primary-color: #3498db;
$font-size: 14px;

// _reset.scss
* { margin: 0; padding: 0; box-sizing: border-box; }

// main.scss
@import 'variables';
@import 'reset';

body {
  color: $primary-color;
  font-size: $font-size;
}

文件命名约定

// 部分文件（Partial）以 _ 开头，不会被单独编译
// _variables.scss → 不会被编译成 variables.css
@import 'variables';  // 可省略 _ 和 .scss

导入路径

// 相对路径
@import './components/button';

// 下划线可省略
@import 'components/button';  // _button.scss

// 扩展名可省略
@import 'variables.scss';
@import 'variables';  // 相同效果

Sass 模块系统（@use）

Sass 新版本推荐使用 @use 替代 @import：

基本用法

// _variables.scss
$primary: #3498db;

// _mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// main.scss
@use 'variables' as v;
@use 'mixins' as m;

.button {
  background: v.$primary;
  @include m.flex-center;
}

命名空间

// 默认命名空间（文件名）
@use 'variables';  // 命名空间：variables
variables.$primary;

// 自定义命名空间
@use 'variables' as v;  // 命名空间：v
v.$primary;

// 全局命名空间（不推荐）
@use 'variables' as *;
$primary;  // 直接使用，无命名空间

@forward 转发

// _index.scss（统一导出）
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// 使用
@use 'styles' as s;
s.$primary;

@import vs @use

// @use 私有成员
$_private-var: #333;  // 下划线开头，不可被外部访问
$public-var: #666;    // 可被外部访问

Less @import

基本用法

// variables.less
@primary-color: #3498db;

// main.less
@import 'variables';

body {
  color: @primary-color;
}

导入选项

// reference：导入但不输出样式
@import (reference) 'buttons';

// inline：原样输出文件内容
@import (inline) 'legacy.css';

// less：强制按 Less 解析
@import (less) 'file.css';

// css：强制按 CSS 解析
@import (css) 'file.less';

// once：只导入一次（默认）
@import (once) 'variables';

// multiple：允许多次导入
@import (multiple) 'theme';

// optional：文件不存在时不报错
@import (optional) 'custom-theme';

模块化目录结构

styles/
├── abstracts/
│   ├── _variables.scss    # 变量
│   ├── _mixins.scss       # 混入
│   └── _functions.scss    # 函数
├── base/
│   ├── _reset.scss       # 重置样式
│   └── _typography.scss  # 排版
├── components/
│   ├── _buttons.scss     # 按钮
│   ├── _cards.scss       # 卡片
│   └── _forms.scss       # 表单
├── layout/
│   ├── _header.scss      # 头部
│   ├── _footer.scss      # 底部
│   └── _grid.scss        # 栅格
├── pages/
│   ├── _home.scss        # 首页
│   └── _about.scss       # 关于页
└── main.scss             # 主入口文件

主入口文件

// main.scss
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'abstracts/functions';

@use 'base/reset';
@use 'base/typography';

@use 'components/buttons';
@use 'components/cards';
@use 'components/forms';

@use 'layout/header';
@use 'layout/footer';
@use 'layout/grid';

@use 'pages/home';
@use 'pages/about';

变量配置与覆盖

Sass @use 配置

// _variables.scss
$primary: #3498db !default;
$secondary: #2ecc71 !default;

// main.scss
@use 'variables' with (
  $primary: #e74c3c,
  $secondary: #9b59b6
);

Less @import 配置

// config.less（项目配置）
@primary: #e74c3c;

// variables.less
@primary: #3498db;  // 默认值

// main.less
@import 'config';      // 先导入配置
@import 'variables';   // 后导入默认值

要点总结

• Sass 新版用 @use 替代 @import，避免全局污染
• @use 提供命名空间，防止变量冲突
• @forward 统一导出多个模块
• 部分文件 _ 前缀不会被单独编译
• 合理的目录结构：abstracts、base、components、layout、pages
• !default 设置变量默认值，允许外部覆盖