Bien débuter avec SASS
SASS c’est une méthode dont tous les intégrateurs web ont toujours rêvé, et je n’exagère pas, imaginez un monde où nous pourrions noter une couleur dans notre code CSS manipuler les nuances, gérer les transparences sans avoir à écrire encore et encore toutes les variantes des dizaines de fois le code.
Imaginez que vous puissiez éviter de nommer des nth-child() encore et encore, mais juste faire une boucle pour ça, ou encore avoir le souci des compatibilités avec les webkit …
Et bien ça existe et ça s’appel SASS.
Installer SASS
c’est la partie la plus complexe, en effet SASS s’installe grâce à Ruby installer, c’est ce que l’on appelle une « gem » de Ruby, le tout s’effectue en ligne de commande, ce qui peu paraître complexe lorsqu’on n’y a jamais touché en effet retrouver un dossier, compiler son CSS peu paraître austère avec méthode.
Je vous conseille si cela vous rebute d’utiliser un programme open source nommé Koala (comme c’est mignon) qui vous permet de compiler votre document SCSS en CSS classique. Ce programme est en français et très simple d’utilisation.
Il vous faut créer un dossier avec votre fichier nommé en .scss, avec bien sur un fichier HTML relié à une feuille de style en CSS pour voir les effets…placer ce dossier dans Koala avec un simple drag and drop et vous pouvez compiler en toute quiétude.
De plus en plus d’add-on sortent pour les différents éditeurs de texte, mais n’ayant pas testé leurs efficacités, je n’en parlerai pas pour l’instant.
Si vous êtes un puriste et que vous voulez l’installer de manière traditionnelle par l’éditeur de commande, vous trouverez toute la méthode d’installation sur le site de SASS.
Les variables SASS, où comment gagner du temps
Si vous n’avez jamais utiliser de langages de programmation, tel que JavaScript, PHP, C# …etc , une variable est une information qui stocker temporairement par l’ordinateur que l’on peut utiliser une ou plusieurs fois, et évite donc les répétitions.
Les variables dans SASS s’écrivent de la même manière qu’en PHP ou jQuery, avec un « $ » avant le nom.
exemple: $blue:#3b98c9;
Ce qui me permet d’enregistrer ma couleur en hexadécimal et de l’utiliser partout où j’en ai besoin sans avoir a retrouver le code couleur.
exemple: div {background : $bleu;}
Les variables sont manipulables, nous pouvons les additionner, soustraire … (oui oui même les couleurs).
Le Nesting, c’est bien plus lisible
Les nesting est une manière d’écrire son scss , qui respect l’arborescence de votre HTML. Qui vous évite les noms à rallonge de type .warpper #contnair div p span{}
en SASS nous pouvons l’ecrire comme ça :
.warpper {
#contnair{
div{
p{
span{}
}
}
}
}
Et permet de mettre les attributs CSS entre les {} et bien voir les effets de l’héritage.
C’est vraiment beaucoup plus lisible.
Le Mixin ça nous facilite la vie
Le mixin vous permet d’enregistrer une partie que vous souhaiter réutiliser plusieurs fois un peu comme une variable. Ce qui peu vous vraiment vous faire gagner du temps comme éviter d’écrire 4 fois les mêmes commandes pour notifier les webkit, les border…
exemple pour mettre une ombre :
@mixin ombrage
{-moz-box-shadow: 0px 1px 5px 0px #656565;
-webkit-box-shadow: 0px 1px 5px 0px #656565;
-o-box-shadow: 0px 1px 5px 0px #656565;
box-shadow: 0px 1px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=5);}
.div1 { @include ombrage;}
Plutôt que répéter c’est 5 lignes pour chaque élément qui nécessite une ombre ou de créer des « class » spécifiques dans son HTML, un simple @mixin unNom{ des commandes;} au début de votre scss.
Et un @include unNom dans l’élément à modifier.
Et c’est pas tout !
Vous connaissez maintenant la base de SASS , mais pas encore sa magie.
En effet c’est bien plus vaste, nous le verrons dans le prochain article, la manière de manipuler les variables et mixin avec des « list », des fonctions qui vont vous faire gagner un temps fou.
josuao