Ce que vous méritez de savoir sur les variables CSS ! !

Cet article vous amènera à en savoir plus sur les variables CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Les variables CSS (alias propriétés personnalisées) sont prises en charge dans les navigateurs Web depuis près de quatre ans. Je les utilise aussi généralement en fonction de la situation du projet. Ils sont très utiles et faciles à utiliser, mais ils peuvent souvent être mal utilisés ou mal compris par les développeurs front-end.

Introduction

Les variables CSS sont des valeurs définies dans un document CSS dans le but de les réutiliser et de réduire la redondance des valeurs CSS. Voici un exemple de base.

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

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

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

Dans cet extrait, #235ad1 est utilisé 3 fois. Imaginez, pour un gros projet, différents fichiers CSS, si un jour on leur demandait de changer les couleurs. Le moyen le plus rapide d’y parvenir est de « trouver et remplacer ».

Utilisez des variables CSS pour résoudre ce problème plus rapidement. Les noms de variables définis doivent commencer par --. Tout d’abord, nous allons maintenant définir des variables à l’intérieur de l’élément :root ou .

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

Est-il beaucoup plus propre que le précédent ? La variable --color-primary est une variable globale car nous l'avons définie à l'intérieur de l'élément :root. Cependant, nous pouvons également étendre les variables à certains éléments tout au long du document.

Variables nommées

Semblable aux variables nommées du langage de programmation, les noms valides des variables CSS doivent contenir des caractères alphanumériques, des traits de soulignement et des tirets. Il convient également de mentionner que les variables CSS sont sensibles à la casse.

/* 合法命名 */
:root {
    --primary-color: #222;
    --_primary-color: #222;
    --12-primary-color: #222;
    --primay-color-12: #222;
}

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

Portée

Les variables CSS ont également leur propre portée, un concept similaire à d'autres langages de programmation. Prenons JS comme exemple : la variable

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

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

element est globale, elle est donc accessible à l'intérieur de la fonction cool(). Cependant, la variable cool() n'est accessible qu'au sein de la fonction otherElement. Les

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

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

Variables--primary-color sont des variables globales et sont accessibles depuis n'importe où dans le document. Puisque la variable --primary-color est définie dans .section-title, elle n'est accessible que dans .section-title.

Ce qui suit est un exemple d'image plus intuitif qui peut améliorer notre compréhension :

La variable --primary-color est utilisée pour la couleur du titre. Nous voulons donner des couleurs personnalisées à 作者名 et 最新文章标题, nous devons donc remplacer --primary-color. La même chose s'applique aux variables --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;
}

Schéma de restauration

La solution de secours ici n'est pas que les variables CSS ne sont pas prises en charge, mais que les variables CSS peuvent prendre en charge les schémas de secours. Prenons l'exemple suivant :

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

Notez que var() a plusieurs valeurs. Le second #221 ne fonctionne que si la variable --primary-color n'est pas définie pour une raison quelconque. Non seulement cela, nous pouvons également emboîter var() à l'intérieur d'un autre var().

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

Cette fonctionnalité est utile dans les situations où la valeur d'une variable dépend d'une action. Il est important de fournir une solution de secours pour une variable lorsqu'elle n'a aucune valeur.

Cas d'utilisation 1 : Contrôler la taille d'un composant

Dans les systèmes de conception, les boutons sont généralement disponibles en plusieurs tailles. Généralement, les boutons peuvent avoir trois tailles (Small, normal, large). Ce n'est pas facile de le faire en utilisant des variables CSS :

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

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

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

En modifiant la variable --unit dans le cadre du composant bouton, nous créons différentes variantes du bouton.

Cas d'utilisation 2 : variables CSS et couleur HSL

HSL représente la teinte, la saturation et la luminosité. La valeur de teinte détermine la couleur et les valeurs de saturation et de luminosité contrôlent la profondeur de la couleur.

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

Ici on rend le bouton plus sombre en diminuant la variable --primary-b.

Troisième cas d'utilisation : Ajustement des proportions

Si vous avez utilisé des programmes de conception tels que Photoshop, Sketch, Figma ou Adobe XD, alors nous Vous souhaiterez maintenir la touche Shift enfoncée tout en redimensionnant l'élément pour éviter de le déformer.

En CSS, il n'existe pas de moyen direct de le faire, mais nous avons une solution simple, en utilisant des variables CSS.

Supposons qu'il y ait une icône et que sa largeur et sa hauteur soient égales. J'ai défini des variables --size pour la largeur et la hauteur.

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

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

用例四：CSS Grid

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变量中可能是一件好事。

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

用例六： Background Position

我们可以在 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变量，我们可以存储它们的两个版本，并根据用户或系统偏好在它们之间切换。

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

用例八： 设置默认值

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

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

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

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

用例九： 控制 wrapper 宽度

网站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

用例十二： 用户头像

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

<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，因为它从父元素继承了它。很有趣,那它在实际的项目中有啥用呢？

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

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

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属性是继承的，因此浏览器将执行以下操作：

• 该属性是否可继承？

  • 如果是，父节点是否拥有该属性?

    • 是的，继承该值
    • 否:设置为初始值
  • 否:设置为初始值

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

网址值

我们可能无法控制网页中的所有资源，其中一些必须在线托管。 在这种情况下，您可以将链接的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 变量也可以表示多个值，看下面的例子：

: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证明了这一点。

计算值

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

禁用CSS变量

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

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

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

作者： Ahmad Shadeed 

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

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!