Dayup
目录

用 CSS 变量搭一套设计系统

Dayup 约 2 分钟 技术 CSS
目录

一个站点想看起来"高级"，靠的不是花哨的动效，而是一致性： 所有间距都来自同一个尺子，所有字号都来自同一套比例。

把所有变量放在最前面

主题里的所有视觉参数都写在 assets/css/main.css 顶部的 :root 里：

:root {
  /* 颜色：只有一个重点色，其余都是不同深浅的灰 */
  --color-text: #16181d;
  --color-muted: #6b7280;
  --color-accent: #1f5eff;
  --color-line: #ececec;
  --color-bg: #ffffff;

  /* 字号比例：1.25 倍递增 */
  --text-xs: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-2xl: 1.953rem;

  /* 间距：8 的倍数 */
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;
}

想换风格时，只改 --color-accent 一个值，全站的链接、标签、下划线都会跟着变。

为什么用变量而不是预处理器

Sass 需要构建步骤，改完要等编译；CSS 变量是浏览器原生支持的， 在开发者工具里改一下就能立刻看到效果，调间距的时候非常省事。

要点

  1. 变量要少。二十个变量比六十个变量更容易记住，也更容易保持一致。
  2. 命名说用途，不说外观。叫 --color-muted 而不是 --gray-500， 以后换成暖灰色时就不用回头改名字。
/* 不推荐：名字绑定了颜色本身 */
--gray-500: #6b7280;

/* 推荐：名字描述它的角色 */
--color-muted: #6b7280;
← 返回技术