如何使用Sass mixins为设计系统创建排版令牌

为设计系统创建排版令牌，核心目标是把字体大小、行高、字重等基础规则集中管理。使用Sass的mixin配合映射，可以让这些规则在项目中以统一方式被调用，避免样式散落各处。

为什么用Sass mixins管理排版令牌

设计系统通常包含多种文本类型，例如大标题、小标题、正文和辅助文字。如果直接在CSS里写死，后期改版会很麻烦。Sass mixins能把排版规则封装起来，通过参数控制输出，既保持一致性也提升维护性。

定义排版令牌映射

我们可以先用一个Sass map保存所有排版相关的变量，比如字号、行高和字重：

// 定义排版令牌映射
$typography-tokens: (
  h1: (
    font-size: 32px,
    line-height: 1.25,
    font-weight: 700
  ),
  body: (
    font-size: 16px,
    line-height: 1.5,
    font-weight: 400
  ),
  caption: (
    font-size: 12px,
    line-height: 1.4,
    font-weight: 400
  )
);

编写排版mixin

接着创建一个mixin，根据传入的令牌名称从映射中取对应的值并输出样式：

// 排版mixin，接收令牌名称
@mixin typography($token-name) {
  $token: map-get($typography-tokens, $token-name);
  
  @if $token {
    font-size: map-get($token, font-size);
    line-height: map-get($token, line-height);
    font-weight: map-get($token, font-weight);
  } @else {
    @warn "未找到排版令牌: #{$token-name}";
  }
}

在组件中使用

有了mixin之后，在任何选择器里都能快速应用某类排版规则：

.page-title {
  @include typography(h1);
  color: #222;
}

.paragraph {
  @include typography(body);
}

.note {
  @include typography(caption);
  color: #888;
}

支持响应式扩展

如果设计系统需要适配不同屏幕，可以在mixin里加入媒体查询逻辑，或者把断点也写进令牌映射中。例如用map-get读取不同断点下的字号，让排版令牌具备响应能力。

注意事项

• 令牌命名要语义化，避免与具体页面耦合
• map中的单位保持一致，推荐用px或rem统一
• 团队应约定修改令牌的流程，防止随意覆盖

排版令牌不是单纯写样式，而是把设计语言翻译成代码约束，Sass mixins正好充当了这个翻译层。

通过上述方式，你可以用Sass mixins为设计系统建立清晰、可复用的排版令牌体系，让前端实现更贴近设计意图。

Sassmixinstypography_tokensdesign_systemcss修改时间：2026-07-25 09:15:16