Paramétrer Sass avec Compass

Article 4 sur 9 de la série: Comprendre et utiliser Sass

• Travailler sa maquette avec Sass et Susy

  Afin de mieux comprendre la mise en œuvre de tout ce que nous avons vu jusqu’à présent, y compris l’utilisation de Sass, nous allons déployer un véritable flux de travail en s’appuyant sur la mise en place d’un site.

• Premiers pas et premiers fichiers Sass

  Après avoir vu tous ces concepts qui gravitent autour de Sass, il est important de mettre à plat et d’établir nos premiers fichiers et nos premières lignes de code afin de mettre tout cela en activité.

• Comment répartir ses fichiers partials sous Sass

  SassScript va bien au-delà de l’utilisation simple de variables ou de mixin, nous allons explorer la mise en place d’un modèle assez complet pour concevoir notre développement de site ou d’application.

• Paramétrer Sass avec Compass

  Bien que la librairie Compass ne soit plus maintenue, nous allons explorer une approche qui l’utilise et nous permet de continuer à en profiter sans compromettre nos productions.

• Installer et préparer Sass pour la production

  Travailler sous Ruby nous apporte une véritable panoplie d’outils que nous avons sous la souris. Voyons comment installer ces différentes facettes qui peuvent nous être très utiles.

• Déployer Sass de manière efficace

  Depuis la démocratisation et l’utilisation des préprocesseurs, différents concepts, principalement basés sur la programmation orientée objet, ont émergés et nous permettent d’aborder Sass d’une manière très modulaire.

• Sass – La compilation et les outils disponibles

  Bien que Ruby soit une approche très ouverte et évolutive, il existe différentes façons de compiler Sass dans CSS, et chaune peut présenter ses intérêts et ses avantages.

• Qu’est ce que Sass – Introduction et présentation

  Qu’est-ce qu’un préprocesseur et ce qu’est Sass? Cet article présente les concepts de base et définis ce qu’on peut attendre d’une telle technologie.

• Comprendre et utiliser Sass

  Cette série ne couvre pas la syntaxe de Sass, mais examine comment utiliser Sass et des concepts qui nous permettent d’exploiter au mieux les possibilités offertes par Sass.

Mise en service et utilisation

Une fois l’environnement installé, et afin de pouvoir travailler, nous allons devoir créer un projet (si vous n’avez pas de projet en cours), ou le surveiller (si vous travaillez sur un projet déjà créé).

Si Compass a été installé, il est possible d’utiliser ses services pour gérer les divers projets. Nous allons voir qu’il existe diverses possibilités.

Création d’un projet

Compass propose, sur son site, un générateur de ligne de commandes Tell us about your project and we’ll help you get it set up.

Ce service génère directement les commandes nécessaires, qu’il ne nous restera plus qu’à à copier, coller afin de les utiliser.

Quels que soient vos besoins, le mini formulaire, mis en place, va pour permettre de définir chacun des paramètres nécessaires, à savoir :

• La création, ou la reprise, d’un projet (install ou create)
• Si vous optez pour Nouveau, il vous faudra alors saisir le nom du projet, qui en fait correspond au nom du dossier qui sera créé pour contenir l’ensemble des fichiers nécessaires
• L’acceptation, ou pas, de la mise en place d’un modèle de démarrage par défaut, (hormis dans certains cas, on optera souvent pour Non et on créera nous même une arborescence personnalisée, cf point 5)
• La syntaxe employée par le projet (Sass ou SCSS)
• La personnalisation de l’arborescence à utiliser, en définissant le nommage des dossiers sources, destination CSS, Javascript et images

Sur une base traditionnelle de création, la ligne de commande devrait ressembler à :

compass create le_nom_du_dossier_projet 
--bare --sass-dir "scss" --css-dir "css" 
--javascripts-dir "js" --images-dir "imgs"

Copiez cette ligne de commandes et basculez dans la console de commande, ou le terminal.

Par défaut vous devriez être dans le répertoire de base, à savoir votre session utilisateur.

Déplacez donc ce pointeur jusqu’à votre dossier de production. Si vous n’avez pas l’habitude de travailler avec la console, ou le terminal, rassurez-vous, ce que nous avons à faire n’est vraiment pas compliqué.

Quel que soit le répertoire dans lequel vous vous trouvez, saisissez

Si vous êtes sous MacOs

cd

Et si vous êtes sous Windows

cd /d

Ensuite,

Dans un cas, comme dans l’autre, glissez déposez à la suite de ces instructions, le dossier dans lequel vous souhaiter créer votre dossier projet.

Disons que vous ayez un dossier Production à la racine de votre disque dur principal.

Si donc, vous glissez déposez le dossier Production à la suite des instructions précédentes, cela devrait donner l’une des deux lignes suivantes

d /Production
cd /d C:\Production

Assurez-vous de donner le focus à la console de commandes, en cliquant dessus, et validez en appuyant sur la touche entrée.

Vous allez déplacer le pointeur de votre console sur le nouvel emplacement. Le résultat devrait être, en fonction de votre environnement l’une des deux lignes suivantes

VotreSession :Production VotreSession$
C:\Production>

Il suffit alors de coller, à la suite, la ligne de commande proposée par le site de Compass et de valider.

compass create le_nom_du_dossier_projet 
--bare --sass-dir "scss" --css-dir "css" 
--javascripts-dir "js" --images-dir "imgs"

Une série d’information va alors s’afficher dans la console de commande vous informant de ce qui a été réalisé. Ouvrez le dossier Production, vous y trouverez alors votre dossier projet, le_nom_du_dossier_projet, qui devrait contenir :

• Un dossier scss, qui sera le dossier source contenant les divers fichiers scss,
• Un fichier config.rb, qui contient l’ensemble des paramètres de configuration définis au travers de la ligne de commande. Nous reviendrons ultérieurement sur les divers éléments de configuration.

Nous reviendrons plus tard sur ce fichier de configuration, continuons pour l’instant, cette première approche de mise en service et utilisation.

Surveillance d’un projet, et compilation

Une fois le projet en place nous allons devoir demander à compiler nos fichiers sources, *.scss et/ou *.sass, en fichier(s) *.css.

Cela est possible au coup par coup

En usant de la commande

compass compile [chemin du dossier projet]

ou encore, en plaçant le pointeur de l’invite de commande dans le dossier du projet et en usant simplement de la commande

compass compile

Cela est également possible de manière automatique

Lorsqu’on travailler sur un projet, il est souvent beaucoup plus souple de demander à Sass de surveiller le dossier de travail et de compiler à chaque fois qu’un fichier source est enregistré. Pour cela, et à l’instar du coup par coup, il est possible d’user des deux commandes suivantes

compass watch [chemin du dossier projet]

ou si l’invite de commande pointe déjà sur le dossier du projet

compass watch

Alternatives au travers d’un fichier système

Quel que soit votre environnement, il est possible de créer, compiler, surveiller vos projets en utilisant des fichiers *.bat (sous Windows) ou *.command (sous MacOS).

Ces fichiers peuvent être préparés à l’avance et réutilisés de projets en projets. Ils nous permettent de pouvoir directement lancer des instructions create, compile ou encore watch, sans devoir passer par lignes de commande.

Pour les utiliser, il suffit de les placer dans le dossier du projet (ou en amont du dossier projet à créer) et de les lancer en double cliquant dessus.

Côté Windows

Deux fichiers .bat peuvent être créés, par exemple create.bat et watch.bat (les noms employés ici sont purement arbitraires). Ces fichiers seront ensuite utilisés pour respectivement gérer la création et la surveillance d’un projet.

Leur contenu est assez explicite puisqu’il s’agit en fait des lignes de commande utilisées précédemment :

compass create

et

ompass watch

Coté MacOS

À l’instar de Windows, il suffit de créer deux fichiers .command, par exemple create.command et watch.command, qui font seront mis en place et utilisés comme les deux précédent.

Cependant ces deux fichiers vont contenir une instruction supplémentaire, cd `dirname $0` qui va permettre de positionner de manière explicite la ligne de commande sur le dossier contenant l’ensemble du script.

cd `dirname $0`
compass create

et

cd `dirname $0`
compass watch –force

L’instruction –force, comme son nom l’indique force le système à enregistrer le nouveau fichier, en écrasant l’ancien fichier déjà présent.

Ensuite, et quel que soit le système d’exploitation,

Vous pouvez bien entendu, compléter les lignes de commandes par toutes les corrections que vous souhaitez apporter, par exemple :

compass create --bare 
--sass-dir "scss" --css-dir "css" 
--javascripts-dir "js" --images-dir "imgs"

Ensuite, afin d’utiliser ces fichiers, il suffit de placer le fichier souhaité dans le dossier projet, (ou en amont du dossier projet à créer, s’il s’agit d’une création et que le nom du projet est défini), et, de double cliquer dessus… la magie des commandes s’occupera du reste.

Donc en résumé, si vous créez un projet, usez du fichier qui contient create, si le projet existe et que vous souhaitez pouvoir compiler à la demande, usez du second.

Le fichier de configuration, config.rb

Dès lors que l’on travaille avec compass, un fichier de configuration, config.rb, est automatiquement créé, (bien sûr, si celui-ci n’est pas déjà présent dans le dossier du projet).

Par défaut, diverses valeurs de configuration apparaissent avec les valeurs définies, soit par les paramètres de la ligne de commande (comme nous l’avons vu dans l’exemple précédent), soit par les données qui sont précisées dans le fichier des valeurs par défaut situé dans le dossier d’installation de compass :

{C:|Applications}\Ruby22-x64\lib\ruby\gems\2.2.0\gems\compass-1.0.3\lib\compass\app_integration\stand_alone\configuration_defaults.rb

Quoiqu’il en soit, et si besoin, le fichier config.rb peut être reconfigurer en fonction des besoins.

Donc par défaut, le fichier config.rb contient

require 'compass/import-once/activate' 
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts" 
# You can select your preferred output style here (can be overridden via the command line):
# …
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Plus un certain nombre de ligne précédées par le signe #. Il s’agit là de commentaires et ils peuvent être supprimés si vous le souhaitez.

En fonction de vos besoins vous pouvez réinitialiser ces valeurs à

require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "imgs"
javascripts_dir = "js"

Ainsi que d’ajouter d’autres valeurs, en vous inspirant de l’article Ruby-based Configuration Reference.

Si vous avez installé des plugins et que vous souhaitez les utiliser dans votre projet, vous aller également devoir le spécifier en ajoutant les commandes appropriées en entête de fichier. En se basant sur les installations réalisées dans l’article précédent, voici les ajouts :

require 'susy'
require 'breakpoint'
require 'scut'
require 'normalize-scss'
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "imgs"
javascripts_dir = "js"

Excepté pour Typesstings qui fonctionne différemment et dont vous trouverez toutes les instructions nécessaires sur le github du plugin.

https://github.com/ianrose/typesettings.git

Quoiqu’il en soit nous l’aborderons également au cours d’un prochain article.

Tests de bon fonctionnement

Tout est prêt… lancez la commande d’observation, soit en ligne de commande compass watch, soit depuis le fichier watch.bat ou watch.command créez précédemment.

Créez un fichier test.scss, que vous enregistrez dans le dossier scss et ajoutez le contenu suivant.

$couleur: #363;
.uneclasse {
   color: $couleur;
}

Dès que vous allez enregistrer ce fichier, vous devriez voir apparaitre le fichier test.css dans le dossier css. Ce fichier devrait contenir

.uneclasse {
   color: #363;
}

Si cela fonctionne, parfait… vous pouvez donc supprimer ces deux fichiers, sinon, reprenez les étapes d’installation et voyez où cela a pu pêcher.