Installation des préprocesseurs SASS +COMPASS et RUBY, pour les novices.

Dans ce mini tuto je vais expliquer au plus simple l’installation et l’utilisation de SASS (Syntactically Awesome Stylesheets). L’apparente complexité des étapes d’installation de SASS freine beaucoup d’intégrateurs web. L’utilisation des lignes de commande n’est pas si délicate qu’il y parait.

Installation de SASS sur un poste classique : w7 x64.

SASS repose sur le langage open-source RUBY ruby-lang.org. Pour un novice, il faut installer RUBY avec un installateur. L’installateur contient RUBY. A l’aide de la console windows, on installe SASS et COMPASS, pas besoin de les télécharger au préalable.

J’utilise RubyInstaller for Windows, Ruby 2.0.0-p353(x64) téléchargé sur rubyinstaller.org .

» L’installation de RUBY est identique à un logiciel classique, cochez :
Installation SASS RUBY

RUBY est installé. Maintenant, ll faut ouvrir la console Windows, appuyez sur Windows+R et tapez cmd.

Ecrivez « gem » puis appuyez sur ENTER.

Installation SASS RUBY
Installation SASS RUBY

Le symbole $ est souvent utilisé avant une ligne de commande, il correspond au chemin d’accès à un répertoire cible et permet de simplifier l’écriture du code dans les explications. Au travers de cet exemple, $ correspond à c:\users\bureau\> .

» Installation de SASS, écrivez :
$ gem install sass puis appuyez sur ENTER

COMPASS est une bibliothèque complémentaire à SASS. Elle n’est pas obligatoire pour faire fonctionner SASS.

» Installation de COMPASS, écrivez :
$ gem install compass puis appuyez sur ENTER

Complémentaire : mise à jour de RUBY, écrivez :
$ gem update – -system

Maintenant tout est installé. L’objectif des lignes de commande SASS est de convertir un fichier style.scss ou style.sass en un fichier style.css interprétable par les navigateurs. L’opération est soit ponctuelle soit automatisée.

» Pour convertir ponctuellement un fichier nommé « style.scss » en « style.css », écrivez :
$ sass style.scss style.css
ou
$ sass style.sass style.scss
Vous pouvez très bien fixer un nouveau nom au fichier css en écrivant :
$ sass style.scss test.css

Apprendre à cibler correctement le répertoire du fichier scss. Vous devez modifier le chemin d’accès d’origine, démonstration :

  • 1)Vu plus haut, $ vaut : c:\users\bureau> et je dois j’accéder au répertoire situé c:\wamp\www\sass.com\
  • 2) J’écris c:\users\bureau\cd c:\wamp\www\sass.com
  • 3) Maintenant $ vaut c:\wamp\www\sass.com>
  • 4) Je peux commencer l’écriture d’une commande SASS

Complémentaire, d’autres commandes utiles:

  • cd .. remonte d’un dossier
  • cd c:\ dossier racine
  • dir liste des répertoires et fichiers

» Pour convertir automatiquement un fichier scss, écrivez :
$ sass – -watch style.scss:style.css
ou
$ sass – -watch style.sass:style.css

Vous travaillez sur votre fichier .scss et à chaque enregistrement le fichier .css est converti automatiquement.

» Pour COMPASS, voici quelques commandes intéressantes :
$ compass create demo.com     créer un répertoire nommé /demo.com avec fichiers inclus, paré pour un nouveau projet web.
$ compass watch     convertion automatique des fichiers scss ou sass en css
$ compass compile

» Pour arrêter une commande en cours, taper ctrl+C et choisir O puis ENTER.

Pour apprendre/comprendre la syntaxe sass :
Guide SASS

Participer à l’article...