SASS pour Syntactically Awesome Stylesheets, est une extension du langage CSS.
Il lui ajoute des fonctionnalités propres aux langages de programmation comme les variables, les fonctions, les conditions, les boucles ... Noooonn ne fermez pas la page de votre navigateur.
Présentation générale
La technologie SASS dispose de deux syntaxes bien distinctes, le SCSS et le SASS :
La syntaxe SCSS pour Sassy Cascading Stylesheets, est la plus utilisée, son extension de fichier est .scss.
La syntaxe SASS s’affranchit des accolades, points virgules et autres crochets, contrairement au SCSS, cette syntaxe fonctionne avec l’indentation (ce qui peut être très déroutant pour des personnes utilisant des langages de programmation) comme le montre l’exemple ci-après :
Pré-requis
- Une bonne connaissance du HTML et du CSS.
Avantages
- Permet une écriture beaucoup plus claire et organisé du CSS
- L’ajout de fonctionnalités permettant d’optimiser le code (les variables et les mixins pour ne citer qu’eux)
Inconvénients
- Potentiellement problématique sur un projet nécessitant plusieurs intégrateurs ou développeurs ne maitrisant pas tous SASS.
Installation – La méthode ligne de commande
Avant d’utiliser SASS et COMPASS, nous devons impérativement installer Ruby sur notre machine.
Pour les utilisateurs de Mac, Ruby est installé par défaut.
Nos amis Linuxien pourront utiliser le gestionnaire de paquet.
Quant aux fidèles utilisateurs de Windows, ils ont à leur disposition le RubyInstaller (http://rubyinstaller.org/), voyons comment l’installer.
Rendez-vous dans la rubrique « Download » et téléchargeons la dernière version du RubyInstaller, il s’agit de la 1.9.3-p362 au moment où j’écris ces lignes.
Une fois télécharger, faisons un double clic sur l’exécutable.
Dans la fenêtre Installation Destination an Optional Tasks, veillez à ce que la case devant Add Ruby executables to your PATH soit cochée, cela vous permettra d’utiliser les fonctionnalités de Ruby directement dans le terminal de Windows.
Veillons également à choisir un répertoire d’installation ne contenant pas d’espace (ex : programme Files), cela peut engendrer des bugs.
Une
fois l’installation terminée, nous devons nous assurer quelle s’est déroulée
de manière correcte, pour cela, ouvrons le terminal de Windows et écrivons
cette commande.
Nous obtenons ceci :
Maintenant il est temps d’installer SASS, exécutons cette commande :
Au bout de quelques secondes, voici ce que nous obtenons :
Pour installer la librairie COMPASS, exécutons cette commande :
Au bout de quelques secondes, nous devrions obtenir ceci :
Voilà, notre installation est terminée, maintenant vérifions que tout fonctionne bien :
- Créons dans notre répertoire de travail un dossier « scss » et un autre « css ».
- Dans notre dossier « scss » créons un fichier « gen.scss ».
- Pour permettre la compilation de nos fichiers en css, nous allons créer un fichier texte tout simple dans lequel nous allons écrire ceci : sass --watch scss:css. Le nom du fichier importe peu, nous devons juste lui donner l’extension .bat et de ne pas oublier de l’exécuter à chaque fois que nous travaillerons sur le projet.
- Exécutons ce fichier .bat. Au bout de quelques secondes, vous devriez avoir ce message :
- Vous n’avez plus qu’a édité votre fichier .scss et de l’enregistrer, vous devriez obtenir une notification de mise à jour de votre fichier CSS.
Si votre fichier n’est pas compilé correctement à cause d’une erreur de syntaxe par exemple, vous aurez un message d’erreur en haut de vos pages vous indiquant la ligne qui pose problème, plutôt pratique.
Installation – La méthode interface graphique
L’alternative à la ligne de commande et de télécharger un des logiciels suivant :
Scout http://mhs.github.com/scout-app/ (gratuit, mac / window / linux)
Fire.app http://fireapp.handlino.com/ (14 $, mac / window /linux)
Codekit http://incident57.com/codekit/ (25 $, mac)
Découvrons Scout qui présente l’avantage d’être gratuit.
La prise en main est rapide grâce à son interface intuitive.
Dans un premier temps, nous devons créer un projet qui est en fait notre répertoire de travaille.
Stylessheet Directories dans la partie «Configure» nous permet de sélectionner un dossier «d’entrée», ce dernier contiendra nos fichiers .sass ou .scss.
Comme vous devez vous en douter, le dossier de «sortie » contiendra nos fichiers .css qui auront été compilé par Scout.
Une fois que nous aurons créé un premier fichier .sass ou .scss, appuyons sur le bouton «Play» et commençons notre intégration.
SASS en détails
L’héritage
L’import
Compass
Compass est un framwork créé par Chris Eppstein proposant une bibliothèque complète de Mixins vous permettant d’inclure très facilement des fonctionnalités avancé de CSS3 comme par exemple les box-shadow :
Bonjour,
J’ai un module _variables.scss :
$mont: « Montagnes »;
$roc: « Paysage rocailleux »;
$bois: « Forêt enneigée »;
dans le module _main.scss :
@include keyframes(caption2) {
0% { content: $mont; }
32% { content: $mont; }
33% { content: $roc }
65% { content: $roc }
66% { content: $bois; }
98% { content: $bois; }
99% { content: $mont; }
100% { content: $mont; }
}
dans le css généré :
@-moz-keyframes caption2 {
0% {
content: « Montagnes »; }
32% {
content: « Montagnes »; }
33% {
content: « Paysage rocailleux »; }
65% {
content: « Paysage rocailleux »; }
66% {
content: « For├¬t ennig├®e »; }
98% {
content: « For├¬t ennig├®e »; }
99% {
content: « Montagnes »; }
100% {
content: « Montagnes »; } }
Apparemment, il a traduit ê par ├¬ et é par ├®.
Je ne sais pas comment il fait, mes versions
compass (1.0.3)
compass-core (1.0.3)
compass-import-once (1.0.5)
sass (3.4.22)
Si vous avez une idée ?
Cordialement