如何使用Sass管理项目中统一的CSS排版字体规范？-css教程-PHP中文网

直接结论：用@mixin typography封装字体规则+语义化sass变量比纯css变量更可靠，因css变量在ie11失效且无法约束设计规范；sass在编译期强制预设档位，杜绝1.73rem等非标准值，零运行时开销，适合保守型项目。

如何使用sass管理项目中统一的css排版字体规范？

直接结论：用 @mixin typography 封装字体规则 + $font-size、$font-weight 等语义化变量集中定义，比零散写 font-size 和 line-height 更可靠、易维护、兼容性好。

为什么不能只靠 CSS 变量管排版

CSS 自定义属性（var(--font-h2)）在 IE 完全失效，而 Sass 编译后是纯 CSS，无运行时依赖；更重要的是，它无法做设计约束——比如禁止标题字号出现 1.73rem 这种非标准值。@mixin typography 在编译期就强制你从预设档位里选，这才是设计系统该有的“护栏”。

常见错误现象：:root { --font-h2: 1.73rem; } 看似灵活，但团队协作中很快出现 20 种“H2”，审查工具也抓不住问题。

适用场景：需要支持 IE11 或构建内部管理后台等保守型项目 → 优先 Sass mixin
适用场景：纯现代浏览器 + 主题色/字号比例需 runtime 切换（如深色模式放大 120%）→ 可混用：Sass 生成基础结构，CSS 变量仅控制缩放系数
性能影响：Sass mixin 零运行时开销；CSS 变量需 JS 注入或大量 calc()，可能触发重排

怎么写一个真正可用的 `typography` mixin

核心是三点：单位交给调用方传入（不硬编码 px）、行高用无单位数值、字重用语义变量而非裸数字。

示例（精简版）：

@mixin typography($size: 1rem, $weight: $font-weight-normal, $lh: 1.5) {
  font-size: $size;
  font-weight: $weight;
  line-height: $lh;
}

配套变量定义（放在 utils/_variables.scss）：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

$font-weight-normal: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;

必须传 $size：它是排版的主轴，不传就全变成 1rem，失去语义区分
$lh 用 1.5 而非 1.5rem：避免和 font-size 单位耦合，缩放更稳定
别在 mixin 里写 var(--font-size-h1)：Sass 不解析它，会原样输出成无效 CSS

如何组织文件让字体规范可复用、不冲突

按职责分层，不用全局污染：

base/typography.scss：只存原始值，如 $h1-font-size: 2.5rem、$base-line-height: 1.5，不带业务语义
semantic/typography.scss：做映射，如 $type-h1: $h1-font-size，并注释使用场景 // 用于首页大标题、产品页主标
所有引用必须显式 @use 'semantic/typography' as type，防止不同模块的 $h1-font-size 冲突
组件内调用写成 @include type.typography($type-h1, $font-weight-bold)，语义清晰且可静态分析

容易踩的坑：把字体变量直接写在 components/_button.scss 里——改一次要翻 10 个文件，且无法统一响应式缩放逻辑。

Bootstrap / Argon 等框架里怎么安全覆盖字体

关键是利用 !default 机制，在引入框架前定义变量，而不是覆盖已编译的 CSS。

例如改 Bootstrap 全局字体：

// 自己的 _custom-variables.scss
$font-family-sans-serif: "PingFang SC", "Microsoft YaHei", sans-serif !default;
$headings-font-family: "Noto Serif SC", $font-family-sans-serif !default;

// 然后在 main.scss 最顶部引入
@use 'custom-variables';
@use 'bootstrap';