0
Je me suis mis au CSS hier et je sens que ça va me prendre la tête de modifier tout les codes couleurs si le client le demande... Idem pour toutes les valeurs de tailles....
Je n'ai pas trop de patience pour ce genre de choses alors j'ai pris les devants et j'ai fait en sorte qu'on puisse créer des variables réutilisable en CSS.
Les variables se déclarent comme ça :
[variables]
@mainColor = #ff0000;
@titleSize = 16px;
@descriptionSize = 2em;
[/variables]
Il est inutile de déclarer toutes les variables au début du code CSS, on peut ouvrir plusieurs "balise" [variable] au sein du même fichier
Puisque j'étais bien lancé, j'ai également ajouté des fonctions permettant de manipuler ces variables :
- toWhite( percent )
S'utilise sur une variable contenant un code couleur, et qui permet de trouver une déclinaison plus clair du code couleur originel. Elle attend en paramètre un nombre compris entre 0 et 1.
- toBlack( percent )
S'utilise sur une variable contenant un code couleur, et qui permet de trouver une déclinaison plus sombre du code couleur originel. Elle attend en paramètre un nombre compris entre 0 et 1.
- to(newValue , percent)
S'utilise sur une variable contenant un nombre (formatté en "px" ou en "em") , et qui permet de tendre vers une nouvelle valeur en fonction d'un pourcentage
- add(val)
S'utilise une variable contenant un nombre (formatté en "px" ou en "em") et permet d'ajouter une valeur à celle contenue dans la variable
- sub(val)
S'utilise une variable contenant un nombre (formatté en "px" ou en "em") et permet de soustraire une valeur à celle contenue dans la variable
- multiply(val)
S'utilise une variable contenant un nombre (formatté en "px" ou en "em") et permet de multiplier une valeur à celle contenue dans la variable
Concrètement, pour s'en servir, il faut créer un fichier CSS avec des variables puis demander à php de charger ce fichier, de l'interpréter et de créer un nouveau fichier qui va contenir le vrai code CSS.
Ma classe php, avant de commencer à travailler, vérifie si le fichier de sortie existe déjà et, si oui, si les dernieres modifications apporté à ce fichier sont plus récente que la dernière modifications apporté sur le fichier source, de telle manière que le fichier CSS ne soit recompilé que si nécessaire
On l'utilise tout simplement comme ça
<?php
include("CSSBuilder.php");
$builder = new CSSBuilder;
$builder->build("input.css","output.css");
?>
Voilà le code contenu dans mon "input.css"
[variables]
@titleSize = 20px;
@titleColor = #FF0000;
@titlePosx = 100;
@titlePosy = 50;
[/variables]
*{
position:absolute;
}
.titleContainer{
left:@titlePosx;
top:@titlePosy;
background-color:@titleColor.toWhite(0.8);
}
.titleContainer p {
color:@titleColor;
font-size:@titleSize;
}
.navContainer {
background-color:@titleColor.toBlack(0.5);
left:@titlePosx.sub(50);
top:@titlePosy.add(200);
}
.navBtn{
left:@titlePosx.to(200,0.5);
}
.navBtn p {
color:@titleColor.toBlack(0.65);
}
Et voilà le code généré par php, dans mon output.css
*{
position:absolute;
}
.titleContainer{
left:100;
top:50;
background-color:#ffcccc;
}
.titleContainer p {
color:#FF0000;
font-size:20px;
}
.navContainer {
background-color:#7f0000;
left:50px;
top:250px;
}
.navBtn{
left:150px;
}
.navBtn p {
color:#590000;
}
Avec ça, le CSS me rebute déjà un peu moins
EDIT : Le arobas situé au début du nom des variables n'est pas obligatoire. Vous pouvez utiliser "$" si vous préférez, ou même rien du tout (mais si vous n'utilisez rien, faites attention aux noms que vous utilisez. Par exemple, si vous utilisez une variable qui s'appelle "color" , ca va rentrez en conflit avec les propriétés css "color", "border-color", "background-color", et tout les autres propriétés (si elles existent) qui contiennent le mot "color". Il est donc recommandé d'utiliser un charactere spécial en début (ou en fin ) de nom de variable pour éviter les problèmes.
EDIT 2: Le code qui gère les fonctions se fait dans un second temps, il est donc possible d'utiliser des variables en paramètres des fonctions. Si vous faite une opération sur une variable contient un chiffre en "px" et que vous le multipliez par un autre défini en "em", c'est le format de la variable sur laquelle on appelle la fonction qui prend le dessus, donc "px" dans ce cas.
EDIT 3 : si un modo passe dans le coin, peut il mettre à jour le titre de ce sujet et mettre "CSSBuilder : un bout de code php pour dynamiser le CSS" à la place (histoire qu'on puisse le retrouver en tapant CSSBuilder dans le moteur de recherche
)Merci d'avance !
Fichier(s) joint(s)
-
CSSBuilder.php 8.04 Ko
7 téléchargement(s)
