Sass 模块化 #

什么是模块化？ #

模块化是将 Sass 代码拆分成多个小文件，按功能或组件组织，然后通过导入语句组合在一起。这种方式提高了代码的可维护性和复用性。

text

styles/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
└── main.scss

部分文件（Partials） #

命名规则 #

以下划线 _ 开头的文件称为部分文件，Sass 不会单独编译它们：

text

_variables.scss  → 部分文件，不单独编译
mixins.scss      → 普通文件，会单独编译

导入时省略下划线 #

scss

// 导入 _variables.scss
@use 'variables';  // 省略下划线和扩展名

@import（旧语法） #

基本用法 #

scss

// 导入单个文件
@import 'variables';

// 导入多个文件
@import 'variables', 'mixins', 'functions';

// 导入目录下所有文件
@import 'components/*';

@import 的问题 #

问题	说明
无命名空间	容易造成变量冲突
重复导入	同一文件可能被多次加载
无私有成员	所有内容都是公开的
已弃用	官方推荐使用 @use

@use（新语法，推荐） #

基本用法 #

scss

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// main.scss
@use 'variables';

.button {
  background-color: variables.$primary-color;
}

命名空间 #

@use 默认使用文件名作为命名空间：

scss

@use 'variables';
@use 'mixins';
@use 'functions';

.container {
  color: variables.$primary-color;
  @include mixins.flex-center;
  width: functions.calculate-width(100);
}

自定义命名空间 #

scss

@use 'variables' as v;
@use 'mixins' as m;

.container {
  color: v.$primary-color;
  @include m.flex-center;
}

无命名空间 #

scss

@use 'variables' as *;

.container {
  color: $primary-color;  // 直接使用，无需命名空间
}

私有成员 #

以 - 或 _ 开头的成员是私有的：

scss

// _variables.scss
$-private-var: red;  // 私有变量
$public-var: blue;   // 公开变量

@function -helper() {  // 私有函数
  @return red;
}

@function get-color() {  // 公开函数
  @return $public-var;
}

配置模块变量 #

使用 with 配置模块的默认变量：

scss

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

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

完整示例 #

scss

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

// _mixins.scss
@mixin button-base {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

// _buttons.scss
@use 'variables' as v;

.button {
  @include button-base;
  background-color: map-get(v.$colors, primary);
}

// main.scss
@use 'variables';
@use 'mixins';
@use 'buttons';

@forward（转发模块） #

基本用法 #

@forward 用于创建模块索引，转发其他模块的内容：

scss

// abstracts/_index.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// main.scss
@use 'abstracts';

.container {
  color: abstracts.$primary-color;
}

添加前缀 #

scss

// abstracts/_index.scss
@forward 'variables' as var-*;
@forward 'mixins' as mx-*;

// main.scss
@use 'abstracts';

.container {
  color: abstracts.$var-primary-color;
  @include abstracts.mx-flex-center;
}

选择性转发 #

scss

// 只转发特定成员
@forward 'variables' show $primary-color, $secondary-color;

// 隐藏特定成员
@forward 'variables' hide $internal-var;

转发时配置 #

scss

// abstracts/_index.scss
@forward 'variables' with (
  $primary-color: #e74c3c
);

// main.scss
@use 'abstracts';

模块组织结构 #

7-1 模式 #

text

sass/
│
├── abstracts/
│   ├── _index.scss        # 转发所有抽象层
│   ├── _variables.scss    # 变量
│   ├── _mixins.scss       # 混合宏
│   └── _functions.scss    # 函数
│
├── base/
│   ├── _index.scss
│   ├── _reset.scss        # 重置样式
│   ├── _typography.scss   # 排版
│   └── _base.scss         # 基础样式
│
├── components/
│   ├── _index.scss
│   ├── _buttons.scss      # 按钮
│   ├── _cards.scss        # 卡片
│   ├── _forms.scss        # 表单
│   └── _navbar.scss       # 导航栏
│
├── layout/
│   ├── _index.scss
│   ├── _header.scss       # 页头
│   ├── _footer.scss       # 页脚
│   ├── _sidebar.scss      # 侧边栏
│   └── _grid.scss         # 网格
│
├── pages/
│   ├── _index.scss
│   ├── _home.scss         # 首页
│   ├── _about.scss        # 关于页
│   └── _contact.scss      # 联系页
│
├── themes/
│   ├── _index.scss
│   ├── _default.scss      # 默认主题
│   └── _dark.scss         # 暗色主题
│
├── vendors/
│   ├── _index.scss
│   └── _normalize.scss    # 第三方库
│
└── main.scss              # 主文件

主文件结构 #

scss

// main.scss

// 1. 配置和抽象层
@use 'abstracts';

// 2. 基础样式
@use 'base';

// 3. 布局
@use 'layout';

// 4. 组件
@use 'components';

// 5. 页面
@use 'pages';

// 6. 主题
@use 'themes';

// 7. 第三方
@use 'vendors';

抽象层索引文件 #

scss

// abstracts/_index.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// 或者使用 show/hide 控制导出
@forward 'variables' show $primary-color, $secondary-color;
@forward 'mixins' show flex-center, button-variant;
@forward 'functions' show calculate-rem, get-color;

实际应用示例 #

创建设计系统 #

scss

// design-tokens/_colors.scss
$colors: (
  primary: (
    base: #3498db,
    light: #5dade2,
    dark: #2980b9
  ),
  secondary: (
    base: #2ecc71,
    light: #58d68d,
    dark: #27ae60
  ),
  neutral: (
    white: #ffffff,
    light: #f5f5f5,
    base: #333333,
    dark: #1a1a1a
  )
) !default;

// design-tokens/_spacing.scss
$spacing: (
  xs: 4px,
  sm: 8px,
  md: 16px,
  lg: 24px,
  xl: 32px,
  xxl: 48px
) !default;

// design-tokens/_index.scss
@forward 'colors';
@forward 'spacing';
@forward 'typography';
@forward 'breakpoints';

// main.scss
@use 'design-tokens' as tokens;

.container {
  padding: map-get(tokens.$spacing, md);
  color: map-get(tokens.$colors, neutral, base);
}

组件库结构 #

scss

// components/_index.scss
@forward 'buttons';
@forward 'cards';
@forward 'forms';
@forward 'modals';
@forward 'navigation';

// components/_buttons.scss
@use '../abstracts' as *;

.button {
  display: inline-block;
  padding: $spacing-sm $spacing-md;
  border: none;
  border-radius: $border-radius;
  cursor: pointer;
  
  &--primary {
    background-color: map-get($colors, primary, base);
    color: white;
  }
  
  &--secondary {
    background-color: map-get($colors, secondary, base);
    color: white;
  }
}

@import 与 @use 迁移 #

迁移前 #

scss

// 旧代码
@import 'variables';
@import 'mixins';

.button {
  color: $primary-color;
  @include flex-center;
}

迁移后 #

scss

// 新代码
@use 'variables';
@use 'mixins';

.button {
  color: variables.$primary-color;
  @include mixins.flex-center;
}

迁移工具 #

bash

# 使用 Sass 官方迁移工具
npm install -g sass-migrator

# 迁移 @import 到 @use
sass-migrator module --migrate-deps styles/

最佳实践 #

1. 使用索引文件 #

scss

// 好：使用索引文件统一导出
// components/_index.scss
@forward 'buttons';
@forward 'cards';

// main.scss
@use 'components';

// 不好：在主文件中逐个导入
@use 'components/buttons';
@use 'components/cards';

2. 合理使用命名空间 #

scss

// 好：简短清晰的命名空间
@use 'abstracts/variables' as v;
@use 'abstracts/mixins' as m;

// 不好：命名空间过长
@use 'abstracts/variables' as variables;

3. 保持模块职责单一 #

scss

// 好：每个文件职责单一
// _variables.scss - 只定义变量
// _mixins.scss - 只定义混合宏
// _functions.scss - 只定义函数

// 不好：一个文件包含所有内容
// _utils.scss - 变量、混合宏、函数混在一起

4. 使用 @forward 创建 API #

scss

// abstracts/_index.scss
// 只公开需要的成员
@forward 'variables' show $primary-color, $secondary-color;
@forward 'mixins' show flex-center, button-variant;
@forward 'functions' show get-color;

下一步 #

掌握了模块化后，继续学习混合宏，创建可复用的样式片段！