Transformer une CSS : premiers pas avec Sass
Première conversion d'un fichier Sass en feuille CSS
Sass est fraîchement installé sur votre système, que diriez-vous de transformer un premier fichier Sass en feuille de styles ? Créez un fichier style.scss et renseignez-y les lignes qui suivent.
.nav {
h2 {
margin-bottom: 8px;
}
li {
margin-bottom: 1px;
}
a {
display: block;
&:hover, &:focus {
color: royalblue;
}
&:active {
color: royalblue;
}
}
}
Dans un terminal, déplacez-vous à l'endroit où est enregistré le fichier style.scss (à l'aide de la commande cd <chemin>), puis lancez la compilation du fichier en feuille de styles styles.css à l'aide de la commande sass <entrée> <sortie> où <entrée> est un fichier Sass et <sortie> un fichier CSS.
Transformation par Sass du fichier en feuille de styles
$ sass styles.scss style.css
Le fichier généré montre que Sass a automatiquement résolu les différentes imbrications des sélecteurs en sélecteurs CSS valides.
styles.scss
.nav h2 {
margin-bottom: 8px; }
.nav li {
margin-bottom: 1px; }
.nav a {
display: block; }
.nav a:hover, .nav a:focus {
color: royalblue; }
.nav a:active {
color: royalblue; }
Si vous n'aimez pas le format de sortie des règles CSS et souhaitez quelque chose de plus traditionnel, relancez la compilation en ajoutant l'option -t expanded à la commande :
$ sass -t expanded styles.scss style.css
Styles.css en format étendu
.nav h2 {
margin-bottom: 8px;
}
.nav li {
margin-bottom: 1px;
}
.nav a {
display: block;
}
.nav a:hover, .nav a:focus {
color: royalblue;
}
.nav a:active {
color: royalblue;
}
Notez que si vous ne précisez pas de fichier de sortie (styles.css ici), Sass affichera la transformation directement dans le terminal.
La transformation Sass en CSS s'affiche dans le terminal
$ sass -t expanded styles.scss
.nav h2 {
margin-bottom: 8px;
}
.nav li {
margin-bottom: 1px;
}
.nav a {
display: block;
}
.nav a:hover, .nav a:focus {
color: royalblue;
}
.nav a:active {
color: royalblue;
}
Session interactive de Sass
Sass supporte un éventail conséquent d'instructions de programmation. Il peut parfois être préférable de tester rapidement un calcul ou une syntaxe au lieu de lancer la compilation de tout un projet pour valider son hypothèse.
C'est pourquoi Sass s'accompagne d'un outil de session dite interactive. Dans un terminal, lancez la commande sass -i pour initialiser la session. Une invite de commandes symbolisée par deux chevrons indique qu'elle attend vos instructions.
Vous pouvez par exemple demander la valeur de la composante bleue de la couleur #ff1493 (ou deeppink) à l'aide de la fonction blue() ou assigner des variables et les utiliser.
La session interactive de Sass en action
$ sass -i >> blue(#ff1493) 147 >> blue(deeppink) 147 >> $gutter: 8px 8px >> $gutter / 2 4px >> 1em + 1px SyntaxError: Incompatible units: 'px' and 'em'.
Pour quitter une session interactive, utilisez la combinaison de touches Ctrl + D, quel que soit votre système d'exploitation (oui, même sous Mac OS X).
Pratique, il est toutefois important de retenir qu'elle n'accepte pas de CSS et qu'elle n'en génère pas. En effet, son but est de tester des instructions Sass (encore appelées SassScript) et en aucun cas des transformations CSS. Si vous souhaitez absolument tester des transformations CSS depuis la ligne de commande, la syntaxe est la suivante (excepté pour les utilisateurs de Windows dont le shell limité ne supporte pas cette syntaxe).
Transformation CSS en saisie directe dans le terminal
$ sass --scss -s <<"EOF"
> .clever {
> font-weight: bold;
> .age { font-variant: small-caps; }
> }
> EOF
.clever {
font-weight: bold; }
.clever .age {
font-variant: small-caps; }
L'argument --scss indique explicitement à Sass que vous utilisez la syntaxe SCSS. L'option -s permet à Sass de lire les données en provenance du terminal. La saisie multiligne se fait grâce à la syntaxe <<"EOF". Attention, n'oubliez pas les guillemets sans quoi Sass générera une erreur. Après avoir appuyé sur la touche Entrée, chaque ligne est préfixée par un chevron. Écrivez normalement vos styles Sass. Une fois terminé, renseignez sur une ligne vide le mot indiqué précédemment entre guillemets (soit EOF dans l'exemple) et appuyez sur Entrée. Sass réalise alors la transformation de votre saisie en CSS.
Vous retrouverez de nombreux exemples d'usages de la session interactive au gré de votre lecture des prochains chapitres.
OUTIL Session interactive de Compass
Compass propose lui aussi une commande pour ouvrir une session interactive : compass interactive. Attention, elle donne accès aux fonctions de Compass mais en aucun cas à ses mixins (voir chapitres 2 et 5). Comme avec la session interactive de Sass, la session se quitte grâce à Ctrl + D.
En résumé
Ce premier contact avec Sass a peut-être éveillé votre curiosité. Entre les règles imbriquées, l'utilisation de variables et cette énigmatique esperluette (le caractère &), Sass paraît plein de mystères. Le prochain chapitre vous propose de découvrir la richesse syntaxique offerte par Sass.
Cet article est constitué à partir de bonnes feuilles tirées de l'ouvrage "Sass et Compass avancé" (280 pages) de Mehdi Kabab, publié chez Eyrolles.