Les variables CSS (attributs personnalisés) améliorent la maintenabilité du style en définissant et en réutilisant les valeurs. La réponse consiste à utiliser - définir des variables et à les appeler avec var (). 1. Définissez-les dans: Root, comme --primary-Color: # 007BFF; 2. Utilisez var () pour les référencer dans des styles tels que l'arrière-plan: var (- couleur primaire); 3. Peut être utilisé pour la commutation de sujet et la réutilisation de jetons de conception; 4. Prise en charge des valeurs de secours telles que VAR (- Color, # 333); 5. Peut être lu et modifié dynamiquement via JavaScript, et finalement réaliser des CS flexibles et maintenables.

Les variables CSS, également appelées propriétés personnalisées , sont un moyen de stocker et de réutiliser les valeurs (comme les couleurs, les tailles de police, l'espacement, etc.) tout au long de votre feuille de style. Ils aident à rendre votre CSS plus entretenu, cohérent et plus facile à mettre à jour.

Ils sont particulièrement utiles lorsque vous travaillez sur de grands projets ou que vous souhaitez implémenter des thèmes (comme le mode clair / sombre) sans répéter les valeurs ou s'appuyer sur des préprocesseurs comme SASS.

Comment définir et utiliser les variables CSS

Les variables CSS sont définies à l'aide du -- préfixe, et ils sont généralement placés dans un bloc de règles CSS - le plus souvent sur la pseudo-classe :root ils sont donc disponibles à l'échelle mondiale.

1. Définir une variable

 :racine {
  - primaire-couleur: # 007BFF;
  --FONT-SIZE-GARD: 1.5rem;
  - Unit d'espacement: 16px;
}

• :root garantit que les variables sont accessibles à l'échelle mondiale.
• Vous pouvez également définir des variables à l'intérieur de sélecteurs spécifiques pour une utilisation plus portée dans le cadre.

2. Utilisez une variable avec var()

Une fois défini, utilisez la fonction var() pour accéder à la variable:

 .bouton {
  Color d'arrière-plan: var (- couleur primaire);
  taille de police: var (- font-size-large);
  rembourrage: var (- unité d'espacement);
}

Cela appliquera les valeurs que vous avez définies plus t?t.

Cas d'utilisation pratiques

? Gestion du thème (par exemple, mode sombre)

Vous pouvez redéfinir les variables dans différentes conditions à l'aide de requêtes multimédias ou de classes.

 :racine {
  --BG-Color: #FFFFFF;
  --Text-Color: # 333333;
}

@Media (préfère-Color-Scheme: Dark) {
  :racine {
    --BG-Color: # 1A1A1A;
    --Text-Color: # f5f5f5;
  }
}

corps {
  Color d'arrière-plan: var (- Bg-Color);
  couleur: var (- couleur texte);
  Transition: Color de l'arrière-plan 0.3S, couleur 0,3 s;
}

Ou basculer les thèmes via JavaScript:

 document.documentElement.style.setProperty ('- BG-Color', '# 000');

? jetons de conception réutilisables

Au lieu de coder les valeurs:

 .carte {
  Border-Radius: 8px;
  rembourrage: 16px;
  marge-fond: 16px;
}

Utilisez des variables:

 :racine {
  - Border-Radius-MD: 8px;
  --padding-sm: 16px;
  --margin-fond: 16px;
}

.carte {
  Border-Radius: var (- Border-Radius-MD);
  rembourrage: var (- padding-sm);
  marge-fond: var (- marge-fond);
}

Vous pouvez maintenant changer d'espacement ou de rayons sur votre site au même endroit.

Conseils avancés

• Valeurs de secours : vous pouvez fournir une secours au cas où la variable n'est pas définie:

   Couleur: var (- Text-Color, # 333); / * # 333 est utilisé si --xtex-color n'existe pas * /

• Variables en variables : vous pouvez vous référer à d'autres variables:

   :racine {
    - primaire: # 007BFF;
    - primary-dark: couleurs-mix (en srgb, var (- primaire), noir 20%);
  }

  Remarque: color-mix() et d'autres fonctions de couleur fonctionnent dans des navigateurs modernes.

• Interaction JavaScript : les variables CSS peuvent être lues et modifiées dynamiquement:

   // Obtenez une variable
  getCompuledStyle (document.DocumentElement) .getPropertyValue ('- primaire-couleur');
  
  // définir une variable
  document.DocumentElement.style.setProperty ('- primaire-couleur', 'Red');

Portée des variables CSS

Ils suivent les règles de cascade CSS normales. Définissez-les sur :root pour l'accès global ou sur des éléments spécifiques pour la portée locale:

 .sidebar {
  --BG-Color: # F0F0F0;
  Contexte: var (- bg-color);
}

Ce --bg-color ne s'applique qu'à l'intérieur .sidebar et de ses enfants.

Fondamentalement, les variables CSS vous donnent des valeurs dynamiques et réutilisables dans le CSS ordinaire - aucun préprocesseur nécessaire. Ils sont bien soutenus dans les navigateurs modernes et rendent le style plus flexible et entretenu.

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!