Une variable CSS est utilisable comme valeur de toute propriété d'une feuille de style css, elle est de la forme @Nom_variable@

Fig. 80 Utilisation d'une variable CSS

Pour ouvrir le gestionnaire de variables cliquez sur le bouton dans l'éditeur CSS

Fig. 81 Gestionnaire de variables CSS

Pour en ajouter une, entrez son nom dans le champ Variable et pressez Entrée ou
Pour modifier un nom, sélectionnez-le, éditez le champ Variable et pressez
Pour supprimez une variable, sélectionnez-la puis pressez
vous ouvre l'historique de vos variables pour revenir en arrière en cas d'erreur.
permet d'importer un fichier de variables que vous aurez préalablement sauvegardé avec

ColorBase=hwFixe
ColorBordure=:ColorBase>6,16
ColorFond=:ColorBase>4,0
ColorLink=:ColorBase>6,0
ColorLinkHover=:ColorBase>4,0
ColorTexteFond=#000000
Fichier 1 Exemple d'un fichier de variables CSS
Lorsque vous éditez le contenu d'une variable le bouton donne accès à divers éditeurs en fonction de son type.


Le type Calcul vous permet de faire dépendre la valeur de votre variable d'une autre, seul les types Couleur et Mesure sont utilisable dans une variable calculée.

Fig. 82 Variable calculée d'après une mesure

Après avoir choisi la source,c-a-d la variable qui servira de base au calcul, vous sélectionnez le type d'opération (+,-,* ou /) puis la valeur à utiliser, pour la base vous avez le choix entre Unité ou %, cela détermine comment est utilisé votre valeur, soit elle est considérée comme une valeur brute soit comme un pourcentage de la source.

Dans l'exemple ci-dessus nous obtenons une nouvelle variable qui vaudra le double de BaseSize, si nous avions opté pour un pourcentage cela équivaudrait à BaseSize*((2*BaseSize)/100)

Fig. 83 Variable calculée d'après une couleur

Si votre source est une couleur alors vous pourrez être liée à elle, pour cela choisissez une des 6 possibilités (3 claires, 3 foncées) et ajustez l'intensité (ici 13).

Si vous modifiez BaseSize et BaseColor les variables qui les utilisent sont automatiquement mise à jour.

Pour placer une variable dans votre feuille de style, sélectionnez-la, cliquez sur "Copier dans le presse-papiers et Quitter", faites un clic droit dans la propriété CSS et collez-la dans l'éditeur CSS.

Fig. 84 Coller une variables CSS

L'utilisation de variables css vous permet la création de thèmes.

Sommaire