Knots

Appearance

CSS 变量 ​

在父级标签样式内可定义一个 CSS 变量（变量内为正常的样式），在子标签的样式内可以直接使用该变量名。

优势：方便复用、修改样式。

定义 CSS 变量 ​

需要注意的是：

  • 变量名必须以 -- 开头（这是 CSS 变量的标识，区分于普通 CSS 属性）
  • 变量名大小写敏感（--main-color 和 --Main-Color 是两个不同的变量）
  • 该变量具备作用域特性（全局 / 局部生效，可继承）。在 :root 伪类内定义的变量是全局的，可在整个页面的所有 CSS 选择器中使用，是最常用的定义方式。
css
:root {
  /* 定义全局CSS变量，--开头 + 自定义变量名 + 样式值 */
  --main-bg-color: #2c3e50;    /* 全局背景色 */
  --text-primary: #ffffff;     /* 全局主文本色 */
  --base-font-size: 16px;      /* 全局基础字体大小 */
  --spacing-unit: 8px;         /* 全局间距单位（方便统一调整间距） */
}
css
/* 局部变量：仅在.btn类及其后代中生效 */
.btn {
  --btn-bg: #007bff;
  --btn-text: #fff;
  --btn-padding: var(--spacing-unit) calc(var(--spacing-unit) * 2); /* 可嵌套引用其他变量 */
}

使用 CSS 变量 ​

使用 CSS 变量的唯一方式：通过 var() 函数来引用。

css
/* 语法：var(变量名) */
:root {
  --main-bg-color: #2c3e50;
  --text-primary: #ffffff;
  --base-font-size: 16px;
}

/* 引用全局CSS变量 */
body {
  background-color: var(--main-bg-color); /* 引用全局背景色变量 */
  color: var(--text-primary);             /* 引用全局文本色变量 */
  font-size: var(--base-font-size);       /* 引用全局字体大小变量 */
}
css
/* 语法：var(变量名, 默认值) */
/* 当引用的 CSS 变量未定义、无效或不存在时，会自动使用该默认值 */

/* 引用一个可能未定义的变量，同时指定默认值 */
.card {
  /* 若--card-border-color未定义，则使用 #e0e0e0 作为边框色 */
  border-color: var(--card-border-color, #e0e0e0);
  /* 默认值可以是复杂样式，甚至嵌套var()函数 */
  padding: var(--card-padding, var(--spacing-unit, 10px));
}
css
/* 像普通的样式一样，可以配合 calc() 函数实现数值计算（如间距缩放、尺寸调整等），这是实现动态样式的常用技巧。 */

:root {
  --base-font-size: 16px;
  --spacing-unit: 8px;
  --container-width: 1200px;
}

/* 运算1：字体大小放大1.2倍 */
h1 {
  font-size: calc(var(--base-font-size) * 1.2); /* 16px * 1.2 = 19.2px */
}

/* 运算2：间距叠加 */
.section {
  margin-top: calc(var(--spacing-unit) * 3); /* 8px * 3 = 24px */
  margin-bottom: calc(var(--spacing-unit) * 2); /* 8px * 2 = 16px */
}

/* 运算3：宽度自适应（减去边距） */
.container {
  width: calc(var(--container-width) - 40px); /* 1200px - 40px = 1160px */
  margin: 0 auto;
}