xCSS – UN framework CSS orienté Objet

xCSS est un framework CSS orienté objet. Oui, du CSS objet

Cela permet, entres autres, l’utilisation de variables au sein de feuille de styles.

Un petit exemple avec des variables ?

[plain]
vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid #CCCCCC;
}
[/plain]

Avec ceci, vous avez des variables $path, $color1 et $border avec certaines propriétés CSS.
Pour les utiliser me demanderez-vous.

[css]
.selector {
background-image: url($path/head_bg.png);
background-color: $color1;
$border;
}
[/css]

Plutôt facile d’utilisation non ?

Et pour jouer avec les imbrications de sélecteurs, cela donne :

[plain]
.selector {
a {
display: block;
}
strong {
color: blue;
}
}
[/plain]

produira le code suivant:

[css]
.selector a {
display: block;
}
.selector strong {
color: blue;
}
[/css]

Et pour l’installation et la configuration de xCSS, ces captures d’écran vous en donne une petite idée.

Lien :

• xCSS
• via des tweets de @integrateur_css et @LaFermeDuWeb