Was Sie über CSS-Variablen wissen sollten! !-CSS-Tutorial-php.cn

In diesem Artikel erfahren Sie mehr über CSS-Variablen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Was Sie über CSS-Variablen wissen sollten! !

CSS-Variablen (auch benutzerdefinierte Eigenschaften genannt) werden seit fast vier Jahren in Webbrowsern unterstützt. Ich verwende sie grundsätzlich auch je nach Projektsituation. Sie sind sehr nützlich und einfach zu verwenden, können jedoch von Frontend-Entwicklern oft missbraucht oder missverstanden werden.

Einführung

CSS-Variablen sind Werte, die in einem CSS-Dokument mit dem Zweck der Wiederverwendbarkeit und der Reduzierung der Redundanz in CSS-Werten definiert werden. Nachfolgend finden Sie ein einfaches Beispiel.

Was Sie über CSS-Variablen wissen sollten! !

.section {
  border: 2px solid #235ad1;
}

.section-title {
  color: #235ad1;
}

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

Nach dem Login kopieren

In diesem Snippet wird #235ad1 dreimal verwendet. Stellen Sie sich für ein großes Projekt verschiedene CSS-Dateien vor, wenn sie eines Tages aufgefordert würden, die Farben zu ändern. Das Schnellste, was wir tun können, ist „Suchen und Ersetzen“. #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);
}

Nach dem Login kopieren

是不是比前面的干净得多？ --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$%#%$#
}

Nach dem Login kopieren

作用域

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

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

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

Nach dem Login kopieren

变量element是全局的，因此可以在cool()函数内部访问。但是，只能在cool()函数中访问变量otherElement。

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

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

Nach dem Login kopieren

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

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

Was Sie über CSS-Variablen wissen sollten! !

变量--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;
}

Nach dem Login kopieren

回退方案

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

在变量值依赖于某个动作的情况下，该特性非常有用。当变量没有值时，为它提供一个回退很重要。

用例一：控制组件的大小

Was Sie über CSS-Variablen wissen sollten! !

在设计系统中，按钮通常有多种尺寸。通常，按钮可以具有三种尺寸（Small, normal, large）。使用 CSS 变量来实现它并不容易：

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

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

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

Nach dem Login kopieren

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

用例二：CSS 变量和 HSL 颜色

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

Was Sie über CSS-Variablen wissen sollten! !

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

Nach dem Login kopieren

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

用例三：比例调整

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

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

Was Sie über CSS-Variablen wissen sollten! !

假设有一个图标，并且其宽度和高度应该相等。我定义了变量--size

Verwenden Sie CSS-Variablen, um dieses Problem schneller zu lösen. Das Definieren von Variablennamen muss mit -- beginnen. Zunächst definieren wir nun Variablen im Element :root oder <html>. 🎜

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

Nach dem Login kopieren

🎜Ist es viel sauberer als das vorherige? Die Variable --color-primary ist eine globale Variable, da wir sie im Element :root definiert haben. Wir können Variablen jedoch auch auf bestimmte Elemente im gesamten Dokument beschränken. 🎜

🎜Benannte Variablen🎜🎜🎜Ähnlich wie bei der Benennung von Variablen in Programmiersprachen sollten gültige Namen für CSS-Variablen alphanumerische Zeichen, Unterstriche und Bindestriche enthalten. Erwähnenswert ist außerdem, dass bei CSS-Variablen die Groß-/Kleinschreibung beachtet wird. 🎜

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

Nach dem Login kopieren

🎜Scope🎜🎜🎜CSS-Variablen haben auch ihren eigenen Gültigkeitsbereich, dieses Konzept ähnelt anderen Programmiersprachen. Nehmen Sie JS als Beispiel: 🎜

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

.wrapper.gap-1 {
  --gap: 16px;
}

Nach dem Login kopieren

🎜Die Variable element ist global, sodass innerhalb der Funktion cool() auf sie zugegriffen werden kann. Auf die Variable otherElement kann jedoch nur innerhalb der Funktion cool() zugegriffen werden. 🎜

:root {
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}

.element {
  background-image: var(--primary-gradient);
}

Nach dem Login kopieren

🎜Die Variable --primary-color ist eine globale Variable und kann von überall im Dokument aus aufgerufen werden. Die Variable --primary-color ist in .section-title definiert, sodass auf sie nur in .section-title zugegriffen werden kann. 🎜🎜Das Folgende ist ein intuitiveres Beispielbild, das unser Verständnis verbessern kann: 🎜🎜 Was Sie über CSS-Variablen wissen sollten! !

Was Sie über CSS-Variablen wissen sollten! !

🎜🎜Variable --primary-color wird für die Titelfarbe verwendet. Wir möchten die Farben für Name des Autors und Titel des neuesten Artikels anpassen, daher müssen wir --primary-color überschreiben. Das Gleiche gilt für --unit-Variablen. 🎜

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

.element.inverted {
  --angle: -150deg;
}

Nach dem Login kopieren

🎜Rollback-Schema🎜🎜🎜Der Fallback hier besteht nicht darin, dass CSS-Variablen nicht unterstützt werden, sondern dass CSS-Variablen Fallback-Schemata unterstützen können. Betrachten Sie das folgende Beispiel: 🎜

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

Nach dem Login kopieren

🎜Beachten Sie, dass var() mehrere Werte hat. Der zweite #221 funktioniert nur, wenn die Variable --primary-color aus irgendeinem Grund nicht definiert ist. Darüber hinaus können wir var() auch in einem anderen var() verschachteln. 🎜

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

Nach dem Login kopieren

🎜Diese Funktion ist in Situationen nützlich, in denen der Wert einer Variablen von einer Aktion abhängt. Es ist wichtig, einen Fallback für eine Variable bereitzustellen, wenn diese keinen Wert hat. 🎜

🎜Anwendungsfall 1: Steuern Sie die Größe der Komponente🎜🎜🎜 Was Sie über CSS-Variablen wissen sollten! !

🎜🎜In Designsystemen gibt es Knöpfe oft in mehreren Größen. Generell können Schaltflächen drei Größen haben (Klein, normal, groß). Mit CSS-Variablen ist das nicht einfach: 🎜

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

Nach dem Login kopieren

🎜 Indem wir die Variable --unit im Rahmen der Button-Komponente ändern, erstellen wir verschiedene Varianten des Buttons. 🎜

🎜Anwendungsfall 2: CSS-Variablen und HSL-Farbe 🎜🎜🎜🎜HSL🎜 steht für Farbton, Sättigung, Helligkeit. Der Farbtonwert bestimmt die Farbe und die Sättigungs- und Helligkeitswerte steuern die Farbtiefe. 🎜🎜 Was Sie über CSS-Variablen wissen sollten! !

🎜

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

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

Nach dem Login kopieren

🎜 So machen Sie die Schaltfläche dunkler, indem Sie die Variable --primary-b verringern. 🎜

🎜Anwendungsfall drei: Proportionsanpassung🎜🎜🎜Wenn Sie Photoshop, Sketch,

Figma</code verwendet haben > oder ein Designprogramm wie <code>Adobe 🎜🎜In CSS gibt es keine direkte Möglichkeit, dies zu tun, aber wir haben eine einfache Lösung, indem wir CSS-Variablen verwenden. 🎜🎜<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/296/674/607/1620699344714894.gif"  class="lazy" title="162069919664347Was Sie über CSS-Variablen wissen sollten! !" alt="Was Sie über CSS-Variablen wissen sollten! !"/>🎜🎜Hypothese Es gibt ein Symbol und seine Breite und Höhe sollten gleich sein. Ich habe die Variablen <code>--size

für Breite und Höhe definiert. 🎜

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

Nach dem Login kopieren

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

用例四：CSS Grid

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

Was Sie über CSS-Variablen wissen sollten! !

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

Nach dem Login kopieren

这样，我们可以创建一个完整的网格系统，该系统灵活，易于维护，并且可以在其他项目中使用。可以将相同的概念应用于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;
}

Nach dem Login kopieren

Was Sie über CSS-Variablen wissen sollten! !

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

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

:root {
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}

.element {
  background-image: var(--primary-gradient);
}

Nach dem Login kopieren

或者我们可以存储一个值。以角度为例:

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

.element.inverted {
  --angle: -150deg;
}

Nach dem Login kopieren

Was Sie über CSS-Variablen wissen sollten! !

用例六： Background Position

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

Was Sie über CSS-Variablen wissen sollten! !

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

Nach dem Login kopieren

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

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

Was Sie über CSS-Variablen wissen sollten! !

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

Nach dem Login kopieren

Was Sie über CSS-Variablen wissen sollten! !

用例八：设置默认值

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

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

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

Nach dem Login kopieren

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

用例九：控制 wrapper 宽度

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

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

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

Nach dem Login kopieren

用例十一：动态网格项目

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

HTML

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

Nach dem Login kopieren

CSS

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

Nach dem Login kopieren

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

用例十二：用户头像

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

<img class="c-avatar lazy"  src="/static/imghw/default1.png"  data-src="user.jpg"   alt=""    style="max-width:90%" />
<img class="c-avatar lazy"  src="/static/imghw/default1.png"  data-src="user.jpg"   alt=""    style="max-width:90%" />
<img class="c-avatar lazy"  src="/static/imghw/default1.png"  data-src="user.jpg"   alt=""    style="max-width:90%" />
<img class="c-avatar lazy"  src="/static/imghw/default1.png"  data-src="user.jpg"   alt=""    style="max-width:90%" />

Nach dem Login kopieren

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

Nach dem Login kopieren

用例十三：媒体查询

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

:root {
  --gutter: 8px;
}

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

Nach dem Login kopieren

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

用例十四：继承

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

HTML

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

Nach dem Login kopieren

css

.parent {
  --size: 20px;
}

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

Nach dem Login kopieren

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

1Was Sie über CSS-Variablen wissen sollten! !

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

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

HTML

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

Nach dem Login kopieren

CSS

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

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

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

Nach dem Login kopieren

请注意，这里是如何将变量--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;
}

Nach dem Login kopieren

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

CSS 变量的工作方式

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

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

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

Nach dem Login kopieren

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

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

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

1Was Sie über CSS-Variablen wissen sollten! !

网址值

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

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

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

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

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

存储多个值

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

1Was Sie über CSS-Variablen wissen sollten! !

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

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

Nach dem Login kopieren

在示例中，我们有一个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;
}

Nach dem Login kopieren

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

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

html

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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

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

Nach dem Login kopieren

计算

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

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

Nach dem Login kopieren

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

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

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

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

Nach dem Login kopieren

Devtools和CSS变量

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

看到颜色

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

1Was Sie über CSS-Variablen wissen sollten! !

计算值

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

1Was Sie über CSS-Variablen wissen sollten! !

禁用CSS变量

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

1Was Sie über CSS-Variablen wissen sollten! !

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

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

作者： Ahmad Shadeed

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

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonWas Sie über CSS-Variablen wissen sollten! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7533

CakePHP-Tutorial

1379

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Arbeiten mit GraphQL Caching Mar 19, 2025 am 09:36 AM

Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört

Aufbau einer Ethereum -App mit Redwood.js und Fauna Mar 28, 2025 am 09:18 AM

Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt

Erstellen Sie Ihr eigenes Bragdoc mit ELEITY Mar 18, 2025 am 11:23 AM

Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.

Vue 3 Apr 02, 2025 pm 06:32 PM

Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.

Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten? Apr 02, 2025 pm 06:17 PM

Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.

Ein bisschen auf CI/CD Apr 02, 2025 pm 06:21 PM

Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:

Vergleich von Browsern für reaktionsschnelles Design Apr 02, 2025 pm 06:25 PM

Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben

Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass Apr 03, 2025 am 10:30 AM

Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.

See all articles

Was Sie über CSS-Variablen wissen sollten! !

Einführung

命名变量

作用域

回退方案

用例一：控制组件的大小

用例二：CSS 变量和 HSL 颜色

用例三：比例调整

用例四：CSS Grid

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

用例六： Background Position

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

用例八： 设置默认值

用例九： 控制 wrapper 宽度

用例十一： 动态网格项目

用例十二： 用户头像

用例十三： 媒体查询

用例十四：继承

CSS 变量的工作方式

网址值

存储多个值

@keyframes规则中的动画变量

计算

Devtools和CSS变量

看到颜色

计算值

禁用CSS变量

Heiße KI -Werkzeuge

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Heiße Themen

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

用例八：设置默认值

用例九：控制 wrapper 宽度

用例十一：动态网格项目

用例十二：用户头像

用例十三：媒体查询

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