你值得了解的關於CSS變數的知識點！！-css教學-PHP中文網

本篇文章帶大家詳細了解CSS變數。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

你值得了解的關於CSS變數的知識點！！

CSS變數（又稱自訂屬性）已在網頁瀏覽器中支援了近四年。我一般也會根據項目情況使用它們。它們非常有用且易於使用，但是前端開發人員通常可能會誤用或誤解它們。

簡介

CSS變數是在CSS文件中定義的值，其目的是可重複使用性並減少CSS值中的冗餘。下面是一個基本範例。

你值得了解的關於CSS變數的知識點！！

.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);
}

登入後複製

變數element是全域的，因此可以在cool()函數內部存取。但是，只能在cool()函數中存取變數otherElement。

:root {
  --primary-color: #235ad1;
}

.section-title {
  --primary-color: d12374;
  color: var(--primary-color);
}

登入後複製

變數--primary-color是全域變量，可以從文件中的任何地方存取。變數 --primary-color由於是在.section-title定義的，所以只能在.section-title中存取。

下面是一個比較直覺的範例圖片，可以加強我們的理解：

你值得了解的關於CSS變數的知識點！！

#變數--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));
}

登入後複製

在變數值依賴某個動作的情況下，該特性非常有用。當變數沒有值時，為它提供一個回退很重要。

使用案例一：控制元件的大小

你值得了解的關於CSS變數的知識點！！

在設計系統中，按鈕通常有多種尺寸。通常，按鈕可以有三種尺寸（Small, normal, large）。使用 CSS 變數來實現它並不容易：

.button {
  --unit: 1rem;
  padding: var(--unit);
}

.button--small {
  --unit: 0.5rem;
}

.button--large {
  --unit: 1.5rem;
}

登入後複製

透過在按鈕元件作用域內更改變數--unit，我們建立了按鈕的不同變體。

用例二：CSS 變數和 HSL 顏色

HSL代表色調，飽和度，亮度。色相的值決定了顏色，飽和度和亮度值可以控制顏色的深度。

你值得了解的關於CSS變數的知識點！！

: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變數。

你值得了解的關於CSS變數的知識點！！

假設有一個圖標，並且其寬度和高度應該相等。我定義了變數--size，用於寬度和高度。

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

登入後複製

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

用例四：CSS Grid

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

你值得了解的關於CSS變數的知識點！！

.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;
}

登入後複製

你值得了解的關於CSS變數的知識點！！

用例五：全值声明，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;
}

登入後複製

你值得了解的關於CSS變數的知識點！！

用例六： Background Position

我们可以在 CSS 变量中包含多个值，这在需要根据特定上下文将元素放置在不同位置的情况下很有用。

你值得了解的關於CSS變數的知識點！！

.table {
  --size: 50px;
  --pos: left center;
  background: #ccc linear-gradient(#000, #000) no-repeat;
  background-size: var(--size) var(--size);
  background-position: var(--pos);
}

登入後複製

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

现在，网站比以往任何时候都更需要深色和浅色模式。使用CSS变量，我们可以存储它们的两个版本，并根据用户或系统偏好在它们之间切换。

你值得了解的關於CSS變數的知識點！！

: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;
}

登入後複製

你值得了解的關於CSS變數的知識點！！

用例八：设置默认值

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

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

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

登入後複製

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

用例九：控制 wrapper 宽度

1你值得了解的關於CSS變數的知識點！！

网站wrapper 可以有多种变化。有时候是需要一个小包装一个页面，一个大包装另一个页面。在这种情况下，合并CSS变量可能是有用的。

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

.wrapper--small {
  --size: 800px;
}

登入後複製

用例十一：动态网格项目

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

HTML

<div class="wrapper" style="--item-width: 250px;">
  <div></div>
  <div></div>
  <div></div>
</div>

登入後複製

CSS

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

登入後複製

事例：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

用例十二：用户头像

1你值得了解的關於CSS變數的知識點！！

另一个有用的用例是大小调整元素。假设我们需要四种不同大小的用户头像，并且只能使用一个变量来控制其大小。

<img src="user.jpg" alt="" class="c-avatar"   style="max-width:90%" />
<img src="user.jpg" alt="" class="c-avatar"   style="max-width:90%" />
<img src="user.jpg" alt="" class="c-avatar"   style="max-width:90%" />
<img src="user.jpg" alt="" class="c-avatar"   style="max-width:90%" />

登入後複製

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

登入後複製

用例十三：媒体查询

组合CSS变量和媒体查询对于调整整个网站中使用的变量非常有用。我能想到的最简单的示例是更改间距值。

:root {
  --gutter: 8px;
}

@media (min-width: 800px) {
  :root {
    --gutter: 16px;
  }
}

登入後複製

使用--gutter变量的任何元素都将根据视口大小更改其间距，这是不是很棒吗？

用例十四：继承

是的，CSS变量确实继承。如果父元素中定义了CSS变量，那么子元素将继承相同的CSS变量。我们看下面的例子：

HTML

<div class="parent">
  <p class="child"></p>
</div>

登入後複製

css

.parent {
  --size: 20px;
}

.child {
  font-size: var(--size);
}

登入後複製

.child元素可以访问变量--size，因为它从父元素继承了它。很有趣,那它在实际的项目中有啥用呢？

1你值得了解的關於CSS變數的知識點！！

我们有一组以下需求的操作项

改变一个变量就可以改变所有项的大小
间距应该是动态的

HTML

<div class="actions">
  <div class="actions__item"></div>
  <div class="actions__item"></div>
  <div class="actions__item"></div>
</div>

登入後複製

CSS

.actions {
  --size: 50px;
  display: flex;
  gap: calc(var(--size) / 5);
}

.actions--m {
  --size: 70px;
}

.actions__item {
  width: var(--size);
  height: var(--size);
}

登入後複製

请注意，这里是如何将变量--size用于flexbox gap属性的。这意味着间距可以是动态的，并且取决于--size变量。

另一个有用的例子是使用CSS变量继承来定制CSS动画：

@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}

登入後複製

这样，我们就不需要定义@keyframes两次，它将继承.walk和.run元素的定制CSS 变量。

CSS 变量的工作方式

当var()函数中的CSS变量无效时，浏览器将根据所使用的属性用初始值或继承值替换。

:root {
  --main-color: 16px;
}

.section-title {
  color: var(--main-color);
}

登入後複製

我使用16px是color属性的值。这是完全错误的。由于color属性是继承的，因此浏览器将执行以下操作：

该属性是否可继承？
- 如果是，父节点是否拥有该属性?
  - 是的，继承该值
  - 否:设置为初始值
- 否:设置为初始值

下面解释浏览器工作的流程图。

1你值得了解的關於CSS變數的知識點！！

网址值

我们可能无法控制网页中的所有资源，其中一些必须在线托管。在这种情况下，您可以将链接的URL值存储在CSS变量中。

:root {
  --main-bg: url("https://example.com/cool-image.jpg");
}

.section {
  background: var(--main-bg);
}

登入後複製

但是，能想知道是否可以使用url()插入 CSS 变量。考虑以下

:root {
  --main-bg: "https://example.com/cool-image.jpg";
}

.section {
  background: url(var(--main-bg));
}

登入後複製

由于var(--main-bg)被视为url本身，因此无效。当浏览器计算出该值时，该值将不再有效，并且将无法按预期运行。

存储多个值

CSS 变量也可以表示多个值，看下面的例子：

1你值得了解的關於CSS變數的知識點！！

:root {
  --main-color: 35, 90, 209;
}

.section-title {
  color: rgba(var(--main-color), 0.75);
}

登入後複製

在示例中，我们有一个rgba()函数，并且RGB值存储在CSS变量中，以逗号分隔。如果我们想根据元素调整alpha值，这样做可以提供灵活性。唯一的缺点是无法使用DevTools颜色选择器来调整rgba值。

另一个例子是将它与background属性一起使用。

:root {
  --bg: linear-gradient(#000, #000) center/50px;
}

.section {
  background: var(--bg);
}

.section--unique {
  background: var(--bg) no-repeat;
}

登入後複製

`@keyframes`规则中的动画变量

如果你阅读过CSS变量规范，则可能会读到“动画污染”一词。这个想法是，在@keyframes规则中使用CSS变量时，无法对其进行动画处理。

html

<div class="box"></div>

登入後複製

CSS

.box {
  width: 50px;
  height: 50px;
  background: #222;
  --offset: 0;
  transform: translateX(var(--offset));
  animation: moveBox 1s infinite alternate;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 50px;
  }
  100% {
    --offset: 100px;
  }
}

登入後複製

动画无法顺利进行。它将仅对值 (0, 50px, 100px)进行动画处理。根据CSS规范：

@keyframes规则中使用的任何自定义属性都会受到动画污染，这将影响通过动画属性中的var()函数引用它时如何处理它。

如果我们希望上述动画能够正常工作，则应采用老式的方法。这意味着，我们需要用要设置动画的实际CSS属性替换变量。

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

登入後複製

计算

你可能不知道可以使用 CSS 变量进行计算。考虑下面示例：

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

登入後複製

.c-avatar 大小会有不同的变化。我将默认值设置为1，所以默认大小为(30px * 30px)。注意不同的类变化以及更改--size值如何导致化身的大小变化。

.c-avatar--small {
  --size: 2;
}

.c-avatar--medium {
  --size: 3;
}

.c-avatar--large {
  --size: 4;
}

登入後複製

Devtools和CSS变量

我们可以在浏览器DevTools中使用一些有用的技巧，这样就能更轻松地使用CSS变量。

看到颜色

使用CSS变量时，看到颜色或背景值的视觉指示器是否有用？ Chrome和Edge证明了这一点。

1你值得了解的關於CSS變數的知識點！！

计算值

要查看CSS变量的计算值，只要将鼠标悬停或单击即可。

1你值得了解的關於CSS變數的知識點！！

禁用CSS变量

当我们需要从使用CSS变量的所有元素中禁用CSS变量时，可以通过从定义它的元素中取消选中它来实现。参见下图：

1你值得了解的關於CSS變數的知識點！！

本文介绍了 CSS 变量的很多内容，希望能对你有些帮助，二创不易，还望点个赞+转发。

原文地址：https://ishadeed.com/article/css-vars-101/

作者： Ahmad Shadeed

译文地址：https://segmentfault.com/a/1190000039978246

更多程式相關知識，請造訪：程式設計影片！！

以上是你值得了解的關於CSS變數的知識點！！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

你值得了解的關於CSS變數的知識點！ ！

簡介

命名變數

作用域

回退方案

使用案例一：控制元件的大小

用例二：CSS 變數和 HSL 顏色

使用案例三：比例調整

用例四：CSS Grid

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

用例六： Background Position

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

用例八： 设置默认值

用例九： 控制 wrapper 宽度

用例十一： 动态网格项目

用例十二： 用户头像

用例十三： 媒体查询

用例十四：继承

CSS 变量的工作方式

网址值

存储多个值

@keyframes规则中的动画变量

计算

Devtools和CSS变量

看到颜色

计算值

禁用CSS变量

你值得了解的關於CSS變數的知識點！！

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

用例八：设置默认值

用例九：控制 wrapper 宽度

用例十一：动态网格项目

用例十二：用户头像

用例十三：媒体查询

`@keyframes`规则中的动画变量