Se connecter Recherche

Dans un précédent article, je vous faisait un brève présentation du SASS, cette syntaxe avancée vous permettant de créer vos feuilles de styles. Nous allons aujourd’hui voir ensemble installer l’outil qui permettre de générer le code CSS final, mettre en place un projet SASS sur votre ordinateur et le fonctionnement globale de la compilation.

epica design

Installer Compass

Le SCSS, extension des fichiers écris en langage SASS, n’est pas exploitable en l’état pour un rendu final de vos sites. Celui-ci est utilisé pour une phase de production, de part tous les avantages qu’il procure, mais devra au final être « transformé » en CSS conventionnel afin d’être interprété par les navigateurs web.

C’est là qu’intervient Compass, un framework open-source qui transformera vos fichiers .scss en un bon vieux .css comme nous avons l’habitude d’en voir.

Compass utilise le langage Ruby, vous devez donc préalablement l’avoir installé sur votre ordinateur avant de pouvoir procédé à la mise en place de Compass. Si vous ne connaissez pas la démarche à suivre, je vous laisse vous référer à cet article, section « Installer la bibliothèque Ruby » uniquement, le reste des éléments n’étant pas requis.

Votre bibliothèque Ruby installée, l’installation de compass est d’une simplicité qui ravira les néophites. Sur votre bureau, ouvrez une fenêtre de commande et tapez simplement:

gem install compass

L’installation se lance et peu prendre un certain temps (quelques minutes). Comme à l’habitude de l’utilisation des fenêtre de commande, vous saurez que celle-ci est terminé quand l’adresse de dossier de l’emplacement d’ouverture de cette dernière sera réaffichée.

epica design

Vous souhaitez vérifiez la bonne installation de compass, tapez simplement ceci dans votre fenêtre de commande:

compass -v

En retour, la version de Compass installé doit vous être indiquée.

Créer un projet Compass

Pour des raisons de facilité, je vous conseille de ranger toutes vos productions SASS dans le même dossier, mais notez bien que ceci n’est absolument pas obligatoire et que vous avez champ libre pour votre organisation.

Pour ce tutoriel,je vais simplement créer un dossier « compass-project » sur mon disque principal C:/, puis dans se dossier créer un autre dossier nommé « premier-projet« .

Vous devez maintenant indiquer à Compass que vous souhaitez démarrer un nouveau project. Ouvrez le dossier « premier-projet » et, à l’intérieur, ouvre une fenêtre de commande (SHIFT + Clic droit > ouvrir une fenêtre de commande ici). entrez la commande de création de nouveau projet qui sera simplement:

compass create nom-de-votre-projet

vous verrez alors apparaitre dans « premier-projet » un dossier ayant le nom-de-votre-projet ainsi qu’un dossier .sass-cache.

Ce dossier .sass-cache est un cache utile à la compilation des fichiers (lorsqu’on convertit le fichier .scss en fichier .css), ne vous en occupez pas, il est indispensable mais ne demande aucune intervention de votre part.

Dans le dossier « nom-de-votre-projet » se trouver plusieurs dossiers et fichiers, détaillons:

  • config.rb est le fichier de configuration du projet
  • sass est le dossier hébergeant vos fichiers .scss
  • stylesheets est le dossier hébergeant les fichiers .css généré à partir des .scss

Vous pouvez modifier ces noms de dossiers, mais pensez à répercuter ces modifications dans le fichiers rb.config

dans le dossier « sass » présent se trouve, par defaut, plusieurs fichiers de style: ie.scss, print.scss et screen.scss ainsi que leur résultat CSS situé eux dans le dossier stylesheets. Ces fichiers ne sont pas une obligation, renommez, supprimez ou conservez comme ça vous chante.

Transformer le SASS en CSS avec Compass

Votre premier projet en place, je vais maintenant vous expliquer comment convertir le code que vous écrirez en SASS vers un CSS standard. Nous allons créer un petit bout de code afin de visualiser ceci en fonctionnement.

Dans le dossier « sass« , creez un fichier style.scss puis, avec votre éditeur de code, collez y ce morceau de SASS:

//mon premier code sass

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

Enregistrez puis rendez vous maintenant dans le dossier « nom-de-votre-projet« .

Ouvrez y une fenêtre de commande …

! : Pour cet exemple, le chemin indiqué en fenêtre de commande doit être C:\compass-project\premier-projet\nom-de-votre-projet>
Si l’adresse de compilation est incorrecte, Compass vous retournera une erreur, sans incidence sur votre travail soit dit en passant.

… et saisissez:

compass compil

la fenêtre vous retourne alors une confirmation de création de votre fichier css sous la forme:

write stylesheets style.css

Rendez vous maintenant dans le dossier stylesheets, vous remarquerez qu’y à été ajouté un fichier style.css contenant, si vous avez utilisez le même code:

/* line 3, ../sass/style.scss */
#main {
  width: 97%;
}
/* line 6, ../sass/style.scss */
#main p, #main div {
  font-size: 2em;
}
/* line 8, ../sass/style.scss */
#main p a, #main div a {
  font-weight: bold;
}
/* line 11, ../sass/style.scss */
#main pre {
  font-size: 3em;
}

Et c’est la que réside toute (du moins une partie) la puissance du SASS! On été automatiquement créés les règles écrites en déterminant les spécificités parent / enfant et ont été commentées de façon à pouvoir les cibler facilement parmis et dans vos fichiers .scss.

Maintenant, réouvrez le fichier style.css et ajoutez y ce code:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

Répétez l’opération de compilation et vérifier votre fichier style.css, vous devez constatez la mise à jour de celui-ci avec ces nouvelles règles css.

Vous allez me dire que l’opération est un peu lourde car la commande compil est manuelle. Il faut donc la saisir à chaque fois qu’on veut générer les fichiers CSS. Mais il existe une commande bien pratique qui permet d’automatiser la compilation. Au lieu de l’instruction précédente, il faut saisir :

compass watch

La fenêtre vous retournera alors une confirmation « Compass is watching for changes« . Cette commande aura pour effet de compiler automatiquement les fichiers .scss dès lors qu’ils sont modifiés. Une fois qu’elle est saisie, on n’a plus qu’à se concentrer sur l’édition des fichiers Sass et le reste se fait tout seul. A chaque mise à jour, la fenêtre vous informe par un message indiquant quel fichier à été mis à jour.

A savoir: Compass est également capable de compiler du code LESS.

Paramètrer Compass

Nous allons jeter rapidement un oeil sur le fichier config.rb. Ce dernier contient les différents paramètres de fichiers et méthode de compilation de votre projet et est entièrement paramétrable afin de le faire correspondre à vos besoins. Plutôt qu’un long texte, je vais juste le commenter afin que vous preniez connaissance de ses éléments principaux.

# ...
# Set this to the root of your project when deployed:
http_path = "/"
# Nom du dossier hébergeant les fichiers css généré par Compass
css_dir = "stylesheets"
# Nom du dossier hébergeant les fichiers scss utilisé par Compass
sass_dir = "sass"
# Nom du dossier hébergeant les images (facultatif)
images_dir = "images"
# Nom du dossier hébergeant les fichiers js (facultatif)
javascripts_dir = "javascripts"
# Méthode de compression pour la sortie css. Au choix :expanded or :nested or :compact or :compressed
output_style = :expanded
# Commenter les règles css, dépend du type de compression choisie
line_comments = true
#...

Pour une configuration plus avancée de ce fichier, je vous laisse vous référer à la documentation officielle: Compass configuration reference

Voilà! Nous venons ensemble de créer votre premier projet utilisant des règles de styles écrite en SASS et vu la méthode permettant de générer un CSS conforme et lisible pour les navigateurs web. Dans un prochaine article nous aborderons les syntaxes de base du SASS afin de comprendre de voir plus en profondeur les possibilités et la puissance de ce langage.


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*