Passons à pas à pas à travers 5 exemples pour vous familiariser avec les variables CSS !

Connaissez-vous les variables CSS ? Si vous ne le connaissez pas, ne vous inquiétez pas ! L'article suivant vous présentera les variables CSS et utilisera 5 exemples pour vous familiariser avec les variables CSS. J'espère qu'il vous sera utile !

À mesure que les applications Web grandissent, le CSS devient plus volumineux, plus verbeux et encombré. L'utilisation de variables CSS dans un bon contexte nous fournit un mécanisme pour réutiliser et modifier facilement les propriétés CSS récurrentes.

Avant les variables purement prises en charge par CSS, nous avions des préprocesseurs comme Less et Sass. Mais ils doivent être compilés avant utilisation, ajoutant ainsi (parfois) une couche supplémentaire de complexité.

Comment définir et utiliser des variables CSS (également appelées propriétés personnalisées)

Pour déclarer une variable JS simple, c'est très simple, comme suit :

let myColor = "green";

Pour déclarer une variable CSS, vous devez ajouter avant le nom de la variable Deux lignes horizontales.

body {
    --english-green-color: #1B4D3E;
}

Maintenant, afin d'utiliser la valeur d'une variable CSS, nous pouvons utiliser la fonction var(...). var(...)函数。

.my-green-component{
    background-color: var(--english-green-color);
}

管理CSS变量的最简单方法是将它们声明在:root伪类中。 鉴于CSS变量与其他CSS定义一样都遵循规则，因此将它们放在:root中将确保所有选择器都可以访问这些变量。

:root{
    --english-green-color: #1B4D3E;
}

览器对CSS变量的支持情况

浏览器对CSS变量的支持一点也不差。 如果查看 Can I Use CSS Variables 那会发现所有主流浏览器都支持CSS变量。 无论是在移动设备还是 PC 上。

现在，让我们看看这些CSS变量的实际作用。

示例1-管理颜色

使用CSS变量的最佳选择之一就是设计的颜色。 不必一遍又一遍地复制和粘贴相同的颜色，我们只需将它们放在变量中即可。

如果有该死的产品要我们更新特定的绿色阴影或将所有按钮设置为红色而不是蓝色，则只需更改该CSS变量的值即可。 我们无需搜索并替换所有出现的该颜色。

动手试试：https://codesandbox.io/s/8kkyl4mlm9?from-embed

示例2-删除重复的代码

通常我们需要构建一些组件的不同变体。相同的基本样式，只是功能略有不同。我们举例使用一个带有不同颜色按钮的案例。

.btn {
  border: 2px solid black;
  // more props here
}

.btn:hover {
  background: black;
  // more props here
}

.btn.red {
  border-color: red
}
.btn.red:hover {
  background: red
}

像这样使用它们：

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

但是，这会增加一些代码重复。在.red类中，我们必须将边框颜色和背景都设置为红色。万一哪天需要更改颜色，那就很麻烦了，需要一个一个的改。这个问题可以通过CSS变量轻松解决。

.btn {
    border: 2px solid var(--color, black);
}
.btn:hover {
    background: var(--color, black);
}
.btn.red {
    --color: red
}

动手试试：https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

示例3-使某些属性易于阅读

如果我们想为更复杂的属性值创建快捷方式，那么CSS 变量非常有用，这样我们就不必记住它了。

CSS属性，如box-shadow、transform和font

// 主要代码
:root {
  --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}
li {
  box-shadow: var(--tiny-shadow);
}
li:hover {
  transform: var(--animate-right);
}

Le moyen le plus simple de gérer les variables CSS est de les déclarer dans la pseudo-classe :root. Étant donné que les variables CSS suivent les mêmes règles que les autres définitions CSS, les placer dans :root garantira que tous les sélecteurs pourront accéder à ces variables.

// 主要代码
.orange-container {
  --main-text: 18px;
}
.orange-container:hover {
  --main-text: 22px;
}
.red-container:hover {
  --main-text: 26px;
}
.title {
  font-size: var(--title-text);
}
.content {
  font-size: var(--main-text);
}

.container:hover {
  --main-text: 18px;
}

Prise en charge du navigateur pour les variables CSS

La prise en charge du navigateur pour les variables CSS n'est pas mauvaise du tout. Si vous regardez Puis-je utiliser des variables CSS, vous verrez que tous les principaux navigateurs prennent en charge les variables CSS. Que ce soit sur mobile ou PC.

Maintenant , voyons ce que font réellement ces variables CSS.

Exemple 1 - Gestion des couleursL'une des meilleures options pour utiliser les variables CSS est la couleur de votre conception. Au lieu de copier et coller les mêmes couleurs encore et encore, nous pouvons simplement les mettre dans des variables.

S'il y a un foutu produit qui souhaite que nous mettions à jour une nuance de vert spécifique ou que tous les boutons soient rouges au lieu de bleus, nous pouvons simplement modifier la valeur de cette variable CSS. Nous n'avons pas besoin de rechercher et de remplacer toutes les occurrences de cette couleur.

Essayez-le vous-même : https://codesandbox.io/s/8kkyl4mlm9?from-embed

Exemple 2 - Supprimer le code en double

Souvent, nous devons créer différentes variantes de certains composants. Même style de base, juste des fonctionnalités légèrement différentes. Prenons un exemple avec des boutons de différentes couleurs.

:root {
 --color: blue;
 --COLOR: red;
}
/*--color and --COLOR are two different variables*/

Utilisez-les comme ceci :

width: var(--custom-width, 33%);

Cependant, cela ajoutera une duplication de code. Dans la classe .red, nous devons définir à la fois la couleur de la bordure et l'arrière-plan sur rouge. Si vous devez changer la couleur un jour, ce sera très gênant et vous devrez la changer une par une. Ce problème peut être facilement résolu avec des variables CSS.

<!--HTML-->
<html style="--size: 600px">

Essayez-le vous-même : https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

Exemple 3 - Rendre certaines propriétés faciles à lire🎜🎜Si nous voulons créer certaines propriétés Les variables CSS plus complexes sont très utiles pour créer des raccourcis vers des valeurs d'attribut afin que nous n'ayons pas à nous en souvenir. 🎜🎜Les propriétés CSS comme box-shadow, transform et font ou d'autres règles CSS avec plusieurs paramètres sont de bons exemples. 🎜🎜Nous pouvons mettre la propriété dans une variable afin de pouvoir la réutiliser dans un format plus lisible. 🎜

body {
  max-width: var(--size)
}

🎜🎜Essayez-le vous-même : https://codesandbox.io/s/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜Exemple de 4 niveaux VARIABLES CONNECTÉES 🎜🎜Les règles de cascade standard s'appliquent également aux variables CSS. Si une propriété personnalisée est déclarée plusieurs fois, la définition la plus basse du fichier CSS remplacera la définition située au-dessus. 🎜🎜L'exemple ci-dessous montre à quel point il est facile de manipuler dynamiquement les propriétés des actions de l'utilisateur, tout en gardant le code clair et concis. 🎜

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

🎜🎜🎜🎜🎜 Essayez-le vous-même : https://codesandbox.io/s/xj0qxn2l7w?from-embed=&file=/index.html🎜🎜🎜Exemple 5 - Changement de thème et variables CSS🎜🎜Variables CSS L’un des grands avantages est leur nature réactive. Une fois que nous les mettrons à jour, toutes les propriétés avec des valeurs de variables CSS seront également mises à jour. Ainsi, avec seulement quelques lignes de Javascript et une utilisation intelligente des variables CSS, vous pouvez créer un mécanisme de changement de thème. 🎜🎜🎜🎜🎜🎜Essayez-le vous-même : https://codesandbox.io/s/24j4m8y5kn?from-embed=&file=/scripts.js🎜

扩展

就像CSS中几乎所有东西一样，变量也非常简单易用。 以下是一些未包含在示例中的技巧，但在某些情况下仍然非常有用：

注意大写，CSS变量区分大小写

:root {
 --color: blue;
 --COLOR: red;
}
/*--color and --COLOR are two different variables*/

当我们使用var()函数时，还可以传入第二个参数。 如果找不到自定义属性，则将使用此值：

width: var(--custom-width, 33%);

可以将CSS变量直接用于HTML

<!--HTML-->
<html style="--size: 600px">

body {
  max-width: var(--size)
}

可以在其他CSS变量中使用CSS变量：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

可以通过媒体查询将CSS变量作为条件。 例如，以下代码根据屏幕大小更改 padding 的值：

:root {
    --padding: 15px 
}

@media screen and (min-width: 750px) {
    --padding: 30px
}

在calc()函数中也可以使用CSS变量。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

CSS 变量不是灵丹妙药。 它们不会解决我们在CSS领域中遇到的所有问题。 但是，它可以让我们的代码更具可读性和可维护性。

而且，它们极大地提高了跨大型文档进行更改的便利性。 只需将所有常量设置在一个单独的文件中，当我们只想对变量进行更改时，就不必跳过数千行代码。

原文地址：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/

作者：Daniel

更多编程相关知识，请访问：编程视频！！

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!