Créez une variable dans le fichier .CSS à utiliser dans ce fichier .CSS [dupliquer]

StackOverflow https://stackoverflow.com/questions/47487

  •  09-06-2019
  •  | 
  •  

Question

Doublon possible :
Éviter les constantes répétées en CSS

Nous avons des "couleurs de thème" qui sont réutilisées dans notre feuille CSS.

Existe-t-il un moyen de définir une variable puis de la réutiliser ?

Par exemple.

.css
OurColor: Blue

H1 { 
 color:OurColor;
}
Était-ce utile?

La solution

Il n'est pas nécessaire que tous les styles d'un sélecteur résident dans une seule règle, et une seule règle peut s'appliquer à plusieurs sélecteurs...donc retournez-le:

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

De cette façon, vous évitez de répéter des styles qui sont conceptuellement la même chose, tout en précisant clairement quelles parties du document elles affectent.

Notez l'accent mis sur « conceptuellement » dans cette dernière phrase...Cela vient d'être évoqué dans les commentaires, donc je vais développer un peu, car j'ai vu des gens faire cette même erreur encore et encore pendant des années - avant même l'existence de CSS : deux attributs partageant la même valeur ne signifie pas nécessairement qu'ils représentent la même chose concept.Le ciel peut paraître rouge le soir, tout comme les tomates - mais le ciel et la tomate ne sont pas rouges pour la même raison, et leurs couleurs volonté varient indépendamment dans le temps.De la même manière, ce n'est pas parce que vous avez deux éléments dans votre feuille de style qui reçoivent la même couleur, la même taille ou le même positionnement, qu'ils le seront. toujours partager ces valeurs.Un concepteur naïf qui utilise le regroupement (comme décrit ici) ou un processeur de variables tel que SASS ou LESS pour éviter valeur la répétition risque de rendre les futurs changements de style incroyablement sujets aux erreurs ;concentrez-vous toujours sur le signification contextuelle de styles lorsqu’on cherche à réduire la répétition, en ignorant leur valeurs actuelles.

Autres conseils

Vous pouvez y parvenir et bien plus encore en utilisant Moins de CSS.

Non mais Toupet est ce que ca.Il s'agit d'un préprocesseur CSS, vous permettant d'utiliser de nombreux raccourcis pour réduire la quantité de CSS à écrire.

Par exemple:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Au-delà des variables, il offre la possibilité d'imbriquer les sélecteurs, en gardant les éléments logiquement regroupés :

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Il y a plus:des mixins qui agissent un peu comme des fonctions et la possibilité d'hériter d'un sélecteur d'un autre.C'est très intelligent et très utile.

Si vous codez dans Ruby on Rails, il le compilera même automatiquement en CSS pour vous, mais il existe également un compilateur à usage général qui peut le faire pour vous à la demande.

Vous n'êtes pas le premier à vous le demander et la réponse est non.Elliotte a un joli discours à ce sujet : http://cafe.elharo.com/web/css-repeats-itself/.Vous pouvez utiliser JSP, ou son équivalent, pour générer le CSS au moment de l'exécution.

CSS n'offre rien de tel.La seule solution consiste à écrire un script de prétraitement qui est soit exécuté manuellement pour produire une sortie CSS statique basée sur un pseudo-CSS dynamique, soit connecté au serveur Web et prétraite le CSS avant de l'envoyer au client.

Ce n'est pas pris en charge pour le moment, sauf si vous utilisez un script pour produire le CSS basé sur certaines variables définies par vous.

Il semble cependant qu'au moins certaines personnes du monde des navigateurs soient J'y travaille.Donc, si cela devient vraiment un standard dans le futur, nous devrons alors attendre qu'il soit implémenté dans tous les navigateurs (il sera inutilisable d'ici là).

Puisque CSS ne l'a pas (encore, je pense que la prochaine version le fera), suivez les conseils de Konrad Rudolph pour le prétraitement.Vous souhaiterez probablement en utiliser un qui existe déjà :m4

http://www.gnu.org/software/m4/m4.html

Vous rendez les choses trop compliquées.C'est la raison pour laquelle la cascade existe.Fournissez simplement vos sélecteurs d'éléments et classez votre couleur :

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

Appliquez-le ensuite aux éléments du HTML, en remplaçant le moment où vous devez utiliser les couleurs de votre thème.

<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>

J'ai écrit une macro (dans Visual Studio) qui me permet non seulement de coder du CSS pour les couleurs nommées, mais aussi de calculer facilement les nuances ou les mélanges de ces couleurs.Il gère également les polices.Il se déclenche lors de la sauvegarde et génère une version distincte du fichier CSS.Ceci est conforme à L'argument de Bert Bos que tout traitement de symbole en CSS ait lieu au point de création, et non au point d'interprétation.

La configuration complète ainsi que tout le code seraient un peu trop compliqués à publier ici, mais pourraient être appropriés pour un article de blog plus tard.Voici la section commentaires de la macro qui devrait suffire pour commencer.

Les objectifs de cette approche sont les suivants :

  1. Autoriser les couleurs de base, les polices, etc.à définir dans un emplacement central, afin qu'une palette entière ou un traitement typographique puisse être facilement modifié sans avoir à utiliser la recherche/remplacement

  2. Évitez d'avoir à mapper l'extension .CSS dans IIS

  3. Générez des fichiers CSS de texte de grande variété qui peuvent être utilisés, par exemple, par le mode conception de VisualStudio

  4. Générez ces fichiers une fois au moment de la création, plutôt que de les recalculer à chaque fois que le fichier CSS est demandé

  5. Générez ces fichiers instantanément et de manière transparente, sans ajouter d'étapes supplémentaires au flux de travail tweak-save-test

Avec cette approche, les couleurs, les nuances de couleurs et les familles de polices sont toutes représentées par des jetons abrégés qui font référence à une liste de valeurs dans un fichier XML.

Le fichier XML contenant les définitions de couleur et de police doit s'appeler Constants.xml et doit résider dans le même dossier que les fichiers CSS.

La méthode ProcessCSS est déclenchée par EnvironmentEvents chaque fois que VisualStudio enregistre un fichier CSS.Le fichier CSS est développé et la version statique développée du fichier est enregistrée dans le dossier /css/static/.(Toutes les pages HTML doivent faire référence aux versions /css/static/ des fichiers CSS).

Le fichier Constants.xml pourrait ressembler à ceci : 

<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
  <colors>
    <color name="Red" value="BE1E2D" />
    <color name="Orange" value="E36F1E" />
    ...
  </colors>
  <fonts>
    <font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
    ...
  </fonts>
</cssconstants>

Dans le fichier CSS, vous pouvez alors avoir des définitions comme :

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */

Voir également Éviter les constantes répétées en CSS.Comme l'a dit Farinha, une proposition de variables CSS a été faite, mais pour le moment, vous souhaitez utiliser un préprocesseur.

Vous pouvez utiliser plusieurs classes dans l'attribut class de l'élément HTML, chacune fournissant une partie du style.Vous pouvez donc définir votre CSS comme :

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

puis combinez les cours selon les besoins :

<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>

Cela vous permet de réutiliser la classe ourColor sans avoir à définir la couleur plusieurs fois dans votre CSS.Si vous changez de thème, changez simplement la règle de notre Couleur.

Cela peut sembler insensé, mais si vous utilisez NAnt (ou Ant ou un autre système de construction automatisé), vous pouvez utiliser les propriétés NAnt comme variables CSS de manière hacky.Commencez avec un fichier modèle CSS (peut-être styles.css.template ou quelque chose du genre) contenant quelque chose comme ceci :

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

Et puis ajoutez une étape à votre build qui attribue toutes les valeurs de propriété (j'utilise des fichiers de build externes et je les <include>) et utilise le filtre <expandproperties> pour générer le CSS réel :

<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />

<copy file="styles.css.template" tofile="styles.css" overwrite="true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

L'inconvénient, bien sûr, est que vous devez exécuter la cible de génération CSS avant de pouvoir vérifier à quoi elle ressemble dans le navigateur.Et cela vous limiterait probablement à générer tous vos CSS à la main.

Cependant, vous pouvez écrire des fonctions NAnt pour faire toutes sortes de choses intéressantes au-delà de la simple expansion de propriétés (comme générer dynamiquement des fichiers image dégradés), donc pour moi, cela en valait la peine.

CSS n'emploie pas (encore) de variables, ce qui est compréhensible compte tenu de son âge et du fait qu'il s'agit d'un langage déclaratif.

Voici deux approches principales pour obtenir une gestion de style plus dynamique :

  • Variables côté serveur dans CSS en ligne
    Exemple (en utilisant PHP) :

    <style> .myclass{color:<?php echo $color; ?>;} </style>

 

  • Manipulation du DOM avec javascript pour changer le côté client CSS
    Exemples (en utilisant la bibliothèque jQuery) :

    $('.myclass').css('color', 'blue');

    OU

    //The jsvarColor could be set with the original page response javascript
    // in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top