CSS 变量由浅入深，提升效率必备知识！

╰+哭是因爲堅強的太久メ 2022-10-09 00:32 159阅读 0赞

文章来自于：[前端大全][Link 1]

CSS 变量（又名自定义属性）已在 WEB 浏览器中支持了近四年。我一般也会根据项目情况使用它们。它们非常有用且易于使用，但是前端开发人员通常可能会误用或误解。

## 简介 ##

CSS 变量是在 CSS 文档中定义的值，其目的是可重用性并减少 CSS 值中的冗余。下面是一个基本示例。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]

.section { 
      border: 2px solid #235ad1;
    }
    
    .section-title { 
      color: #235ad1;
    }
    
    .section-title::before { 
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #235ad1;
    }

在此代码段中，`#235ad1` 使用了3次。想象一下，对于一个大型项目，不同的 CSS 文件，如果哪天被要求更改颜色。我们可以做的最好快的方式就是“查找并替换”。

使用 CSS 变量，可以更快的解决这个问题。定义变量名需要用 `--` 开头 。首先，我们现在将在 `:root` 或 `<html>` 元素中定义变量。

:root { 
      --color-primary: #235ad1;
    }
    
    .section { 
      border: 2px solid var(--color-primary);
    }
    
    .section-title { 
      color: var(--color-primary);
    }
    
    .section-title::before { 
      /* Other styles */
      background-color: var(--color-primary);
    }

是不是比前面的干净得多？ `--color-primary` 变量是全局变量，因为我们在 `:root` 元素中定义了它。但是，我们还可以将变量范围限定到整个文档中的某些元素。

## 命名变量 ##

与编程语言命名变量相似，CSS 变量的有效命名应包含字母数字字符，下划线和破折号。另外，值得一提的是 CSS 变量区分大小写。

/* 合法命名 */
    :root { 
        --primary-color: #222;
        --_primary-color: #222;
        --12-primary-color: #222;
        --primay-color-12: #222;
    }
    
    /* 非法命名 */
    :root { 
        --primary color: #222; /* Spacings are not allowed */
        --primary$%#%$#
    }

## 作用域 ##

CSS 变量也有自己的作用域，这个概念类似于其他编程语言。以 JS 为例：

:root { 
      --primary-color: #235ad1;
    }
    
    .section-title { 
      --primary-color: d12374;
      color: var(--primary-color);
    }

变量 `--primary-color` 是全局变量，可以从文档中的任何地方访问。变量 `--primary-color` 由于是在 `.section-title` 定义的，所以只能在 `.section-title` 中访问。

下面是一个比较直观的示例图片，可以加强我们的理解：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]  
变量 `--primary-color` 用于标题颜色。我们想为 作者名 和最新文章标题 自定义颜色，因此我们需要将 `--primary-color` 覆盖。这同样适用于 `--unit` 变量。

/* 全局变量 */
    :root { 
      --primary-color: #235ad1;
      --unit: 1rem;
    }
    
    /* section-title 默认的颜色和间距 */
    .section-title { 
      color: var(--primary-color);
      margin-bottom: var(--unit);
    }
    
    /* 覆盖 section-title 样式 */
    .featured-authors .section-title { 
      --primary-color: #d16823;
    }
    
    .latest-articles .section-title { 
      --primary-color: #d12374;
      --unit: 2rem;
    }

## 回退方案 ##

这里的回退不是不支持 CSS 变量的回退，而是 CSS 变量可以支持回退方案。考虑以下示例：

.section-title { 
      color: var(--primary-color, #222);
    }

注意， `var()` 有多个值。第二个 `#221` 只在变量 `--primary-color` 由于某种原因没有定义的情况下有效。不仅如此，我们还可以将 `var()` 嵌套到另一个 `var()` 中。

.section-title { 
      color: var(--primary-color, var(--black, #222));
    }

## 用例一：控制组件的大小 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]  
在设计系统中，按钮通常有多中尺寸。通常，按钮可以具有三种尺寸（Small，Normal，Large）。使用 CSS 变量来实现它并不容易：

.button {   --unit: 1rem;  padding: var(--unit);}.button--small {   --unit: 0.5rem;}.button--large {   --unit: 1.5rem;}

通过在按钮组件作用域内更改变量 `--unit` ，我们创建了按钮的不同变体。

## 用例二：CSS 变量和 HSL 颜色 ##

HSL 代表色调，饱和度，亮度。色相的值决定了颜色，饱和度和亮度值可以控制颜色的深浅。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]

:root { 
      --primary-h: 221;
      --primary-s: 71%;
      --primary-b: 48%;
    }
    
    .button { 
      background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
      transition: background-color 0.3s ease-out;
    }
    
    /* 使背景更暗 */
    .button:hover { 
      --primary-b: 33%;
    }

这里通过减小变量 `--primary-b` 使按钮变暗。

## 用例三：比例调整 ##

如果您使用过 Photoshop，Sketch，Figma，Adobe XD 之类的设计程序，那么我们会想在调整元素大小的同时按住 `Shift` 键以避免扭曲它。

在 CSS 中，没有直接的方法来做到这一点，但是我们有一个简答的解决方法，使用 CSS 变量。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 4]  
假设有一个图标，并且其宽度和高度应该相等。我定义了变量 `--size` ，用于宽度和高度。

.icon { 
      --size: 22px;
      width: var(--size);
      height: var(--size);
    }

现在，您只需更改 `--size` 变量的值即可模拟 `shift` 调整大小的效果。

## 用例四：CSS Grid ##

CSS 变量对于网格非常有用。假设希望网格容器根据定义的首选宽度显示其子项。与为每个变体创建类并复制 CSS 相比，使用变量更容易做到这一点。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 5]

.wrapper { 
      --item-width: 300px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
      grid-gap: 1rem;
    }
    
    .wrapper-2 { 
      --item-width: 500px;

这样，我们可以创建一个完整的网格系统，该系统灵活，易于维护，并且可以在其他项目中使用。可以将相同的概念应用于 `grid-gap` 属性。

wrapper { 
      --item-width: 300px;
      --gap: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
    }
    
    .wrapper.gap-1 { 
      --gap: 16px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 6]

## 用例五：全值声明，CSS 渐变 ##

以全值表示，例如，类似渐变的东西。如果整个系统中使用渐变或背景，将其存储到 CSS 变量中可能是一件好事。

:root { 
      --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
    }
    
    .element { 
      background-image: var(--primary-gradient);
    }

.element { 
      --angle: 150deg;
      background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
    }
    
    .element.inverted { 
      --angle: -150deg;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 7]

## 用例六：Background Position ##

我们可以在 CSS 变量中包含多个值，这在需要根据特定上下文将元素放置在不同位置的情况下很有用。  
![在这里插入图片描述][20210623090716986.png]

.element { 
      --angle: 150deg;
      background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
    }
    
    .element.inverted { 
      --angle: -150deg;
    }

## 用例七：在明暗模式之间切换 ##

现在，网站比以往任何时候都梗需要深色和浅色模式。使用 CSS 变量，我们可以存储它们的两个版本，并根据用户或系统偏好在它们之间切换。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 8]

:root { 
      --text-color: #434343;
      --border-color: #d2d2d2;
      --main-bg-color: #fff;
      --action-bg-color: #f9f7f7;
    }
    
    /* 添加到`<html>`元素的类*/
    .dark-mode { 
      --text-color: #e9e9e9;
      --border-color: #434343;
      --main-bg-color: #434343;
      --action-bg-color: #363636;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 9]

## 用例八：设置默认值 ##

在某些情况下，您将需要使用 JavaScript 设置 CSS 变量。假设我们需要获取可扩展组件的高度。

变量 `--details-height-open` 为空，它将被添加到特定的 HTML 元素中。当 JavaScript 由于某种原因失败时，提供适当的默认值或后备值很重要。

.section.is-active { 
      max-height: var(--details-height-open, auto);
    }

`auto` 值是 JS 失败时的回退值，并且没有定义 CSS 变量 `--details-height-open`

## 用例九：控制 wrapper 宽度 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 10]  
网站 `wrapper` 可以有多种变化。有时候是需要一个小包装一个页面，一个大包装另一个页面。在这种情况下，合并 CSS 变量可能是有用的。

.wrapper { 
      --size: 1140px;
      max-width: var(--size);
    }
    
    .wrapper--small { 
      --size: 800px;
    }

## 用例十：动态网格项目 ##

我们可以在 `style` 属性中添加 `--item-width` 变量，仅此而已。例如，这种方法可以帮助建立网格原型。

**HTML**

**CSS**

.wrapper { 
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
      grid-gap: 1rem;
    }

[Link 1]: https://mp.weixin.qq.com/s/y9RBSE-0HJozQC7DNf5O9w
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20221005/264c696dd1244c90bb2b60d82e17d12f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20221005/e282008bc4cd45bfa41471fb03036633.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: /images/20221005/6882645659654c5a807bc861a475d7b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]: /images/20221005/d568ed7fdfdf4cec944026ee6c4c4fad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 4]: /images/20221005/ccf31b206f3143029b82345861255321.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 5]: /images/20221005/52d04da64f7d4bf897a02d21f6f89075.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 6]: /images/20221005/c2ff585ea9d94e3d9bc36522320685ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 7]: /images/20221005/75a65558924644239e6de2c2916a2da3.png
[20210623090716986.png]: /images/20221005/91d94cb9e07548c591958a00e30bc492.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 8]: /images/20221005/cfcd7b6e87ce4bf7b329fc230b6d3a75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 9]: /images/20221005/0a42382305c04772b96252b268eb5133.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 10]: /images/20221005/c402706dbc8142e3ac328763adc56179.png