Sass

Sass est une technologie permettant d'intégrer variables, fonctions, opérateurs, imports et héritage dans l'élaboration des feuilles de style, via un langage de script (sass ou scss).

Installer Ruby

Avec l'invite de commande Ruby, mettre à jour Ruby et installer Compass :

        
              gem update --system
gem install compass

Pour les utilisateurs windows, si vous avez l'erreur :

        
              ERROR:  While executing gem (Encoding::UndefinedConversionError)
    U+2019 to CP850 in conversion from UTF-16LE to UTF-8 to CP850

Exécutez avant la mise à jour et l'installation la commande :

chcp 1252

Si vous avez l'erreur SSL :

        
              SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed

Télécharger le certificat http://curl.haxx.se/ca/cacert.pem
Placer le fichier dans le dossier d'installation de Ruby (par défaut C:\RubyXXX-XX)
Aller dans Ordinateur → Propriétés → Paramètres systèmes avancés → Variables d'environnement
Ajouter une nouvelle variable système :
1. Variable: SSL_CERT_FILE
2. Valeur : C:\RubyXXX-XX\cacert.pem

Association des fichiers scss à l'éditeur css

Dans Window/preferences, ajouter les fichiers scss pour permettre leur ouverture par l'éditeur CSS d'eclipse

Compilation des fichiers scss dans Eclipse

Créer un projet (Static web project, ou java project)
Créer un dossier css
Créer un dossier scss et créer le fichier de test suivant :

        
          test.scss
          
              $font-stack:   Helvetica, sans-serif;
$primary-color: #333;
 
body {
  font: 100% $font-stack;
  color: $primary-color;
}

Pour permettre la compilation automatique des fichiers scss en css dans Eclipse :

Afficher les propriétés du projet et activer l'élément Builders :
Choisir New et entrez les valeurs suivantes :

Nom du Builder sass (ou autre)

Location

C:\{RubyFolder}\bin\compass.bat

Working directory

${project_loc}

Arguments

        
              compile --sass-dir "${project_loc}/scss" --css-dir "${project_loc}/css" --javascripts-dir "${project_loc}/js" --images-dir ${project_loc}/img"

Dans l'onglet Refresh, sélectionner le dossier contenant les ressources scss à compiler
Dans l'onglet Build options, cocher During autoBuild

Compiler votre projet (Build project), ou activez l'autobuild :
Le dossier css doit maintenant contenir le fichier test.css suivant :

        
          test.css
          
              /* line 4, ../scss/main.scss */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

http://sass-lang.com/guide

Sass

Intégration à Eclipse

Ruby & Compass

Configuration d'Eclipse

Association des fichiers scss à l'éditeur css

Compilation des fichiers scss dans Eclipse