Installation de SASS pour Omega 4

SASS est un méta-langage, comparable à LESS, permettant de facilité l’écriture du CSS. Pour cela, l’on va non pas modifier le fichier CSS mais un fichier .sass ou .scss. Ces fichiers ont la particularité d’être plus simple à écrire que les fichiers CSS et d’informer des paramètres qui éviteront la redondance d’informations et de vous concentrer uniquement sur votre design. Il suffira ensuite de compiler ce fichier pour générer le ou les fichiers CSS correspondant.
Vous trouverez une présentation bien plus complète de SASS dans cet article.

Pour installer SASS, il faut savoir qu’il faut déjà avoir Ruby. Les informations que je trouve sur la version minimal de Ruby requis par SASS sont assez vague mais il semblerait que SASS ne fonctionne pas avec la version 1.8.7 nais je lis par ci par là qu’il faudrait au minimum la version 1.9.3 alors que d’autres le font tourner avec des versions en dessous. D’autres qu’il suffit d’installer SASS et les autres paquets avec le gestionnaire de dépendance, j’ai nommé Bundler.

Bref, histoire de ne pas me prendre la tête avec des problèmes de version et de compatibilité et étant donné que je n’avais que la version 1.8.7, j’ai compilé la dernière version de Ruby. Voici un tutoriel qui aidera ceux qui sont dans mon cas. Si vous préférez ne pas compiler Ruby, vous pouvez aussi l’installer avec RVM. Par contre, RVM ne permet pas forcément d’installer toutes les versions selon votre distribution.

Une fois Ruby sur votre système, vous pouvez installer Bundler qui vous permettra d’ajouter des gems en respectant les dépendances.

gem install bundler

Puis pour installer les gems nécessaires:

bundle install toolkit compass compass-normalize compass-rgbapng susy sass-globbing

Si je parle de SASS, c’est parce qu’il est de base utilisé avec Omega, même si on peut décider de ne pas l’utiliser. Mais c’est un outil qui reste très pratique et vous permettra de gagner du temps et de l’organisation dans vos feuilles de style. Il est donc plus ingénieux de l’utiliser.

Les fichiers SASS de votre thème Omega se trouve dans le dossier « sass » et ce sont ces fichiers que vous devrez modifier à la place des fichiers css habituels.

Pour compiler les fichiers sass, il suffit de lancer à la racine de votre thème la commande

compass compile

Si vous ne désirez pas la relancer à chaque fois la commande, vous pouvez en utiliser une autre qui surveillera vos fichiers et recompilera les fichiers chaque fois que l’un d’eux aura été modifié:

compass watch

Sachez enfin que si vous n’êtes pas fan de la ligne de commande, il existe plusieurs outils graphiques pour Sass comme Compass.app, LiveReload ou CodeKit.

Post to Twitter Post to Facebook Post to Google Buzz Post to LinkedIn

Laissez un commentaire

«