var() CSS fonction

:root{
  --bg-color : red;
  --mabordure : 3px solid rgb(20, 32, 54);
}
body{ background-color : var(--bg-color); }
.identifiant {
  --taille : 1;
  border : var(--mabordure);
  font-size : calc(var(--taille) * 1rem);
}

Règles de syntaxes CSS pour var().

Règles d'écriture des valeurs personnalisées

Le nom de la variable :

• commence toujours par deux tirets "--",
• ne contient pas d'espace,
• ne comporte pas de caractères accentués.
• tiret "-", chiffre, tiret bas "_" sont acceptés.

• correspond à une valeur, un mot clé qui pourra être assigné à la propriété Css qui reçoit le val().
• ce ne peut pas être un bout de valeur.

--taille : 5;
font-size : var(--taille)px;
....
--propriete : font-size;
var(--propriete) : 5px;

Les valeurs personnalisées ne peuvent être déclarées qu'entre "{" "}".
On utilise généralement la pseudo-classe CSS :root pour faire l'ensemble des déclarations afin que les valeurs personnalisées soient globales. Dans le cas où, vous n'utilisez pas :root, la portée de la valeur personnalisée restera limité, seul l'héritage permettra d'y accéder (voir --centerLocale dans l'exemple de code).

:root{
  --my-color : darkred; 
  --maBordure : 3px solid rgb(20, 32, 54); 
  --center : center; 
} 
/* Exemple de déclaration locale des valeurs personnalisées */ 
.maClass{
  --my-color : green;  
  --taille: 5; 
}

Règles d'applications des valeurs personnalisées

Si la valeur de var() :

• n'est pas une valeur admise par la propriété, la valeur est ignorée.
• contient un !important, ce dernier est supprimé.

• qui n'existe pas, la valeur est ignorée ou on applique la valeur de sécurité si elle a été précisée.

Dans l'exemple ci-dessous, seuls les éléments qui hériteront de .maClass auront une couleur green, les autres auront une couleur darkred.
Si dans un héritage, il y a plusieurs --my-color, alors c'est le poids des sélecteurs qui déterminera la valeur à prendre.

:root{
  --my-color : darkred; 
  --maBordure : 3px solid rgb(20, 32, 54); 
  --center : center; 
} 
/* Exemple de déclaration locale des valeurs personnalisées */ 
.maClass{
  --my-color : green;  
  --taille: 5; 
}

Compatibilités navigateurs de la fonction var()

Votre avis sur la définition var() en CSS