Sass & Compass

Sass et Compass : Scout, Prepros ou ligne de commande ?

Logo Sass

CSS évolue mais pas assez vite semble-t-il aux yeux de certains, ce qui explique l’apparition des préprocesseurs comme Less ou Sass qui ont ajouté les variables, les sélecteurs imbriqués, les calculs, etc. Sass et Compass sont des gemmes Ruby qui s’utilisent habituellement en ligne de commande. Toutefois, il existe des logiciels permettant de compiler des fichiers Sass et Compass en CSS. Ces logiciels peuvent être utiles, dans un premier temps, pour aplanir la courbe d’apprentissage : Scout pour sa simplicité rassurante et Prepros pour la richesse de ses options (en plus de sa capacité à compiler une foultitude d’autres langages). Je terminerai bien évidemment avec l’utilisation de la ligne de commande, bien plus efficace sur le moyen et long terme (même si on utilise Windows 8.1).

Préambule :

Cet article est le résultat d’un début de brouillon de 2013 composé d’une liste de liens sur les préprocesseurs. Avec le recul, ces quelques notes ont pris du poids, avec le risque de paraitre un peu désorganisées. Désolé de ne pas avoir pris le le temps de faire plus court 🙂

Sommaire :

  1. Scout
  2. Prepros
  3. Ligne de commande
  4. Premiers pas avec Sass
  5. Quelques mots sur Compass
  6. Installer d’autres modules
  7. Ressources pour apprendre Sass & Compass
  8. Avis sur les préprocesseurs
  9. Remerciements

Scout

Scout est une application Adobe Air créée en 2011 par l’agence Mutually Human Software. Le compte Github indique que les mises à jour datent d’il y a 3 ou 4 ans. Les versions de Sass et Compass risquent donc d’être assez anciennes (mention des versions dans les sources). Je l’ai quand même gardé car sa simplicité en fait un bon candidat pour tester le potentiel de Sass sans se disperser.

Configuration de Scout
Il suffit de renseigner quelques champs pour paramétrer Scout.

Installation et paramétrage de Scout

Rendez vous à l’adresse mhs.github.io/scout-app pour télécharger l’application.

Au lancement de Scout, il faut remplir les champs pour indiquer à l’application le dossier Sass à surveiller et le dossier vers lequel il doit compiler la version CSS. Si comme moi vous utilisez WordPress, vous pouvez créer un dossier /sass à la racine de votre thème et dans le dossier /css.

Dossiers des feuilles de style

  • Input folder : D:\Bruno\work\web\wamp\www\4design\wp-content\themes\basics\sass
  • Output folder : D:\Bruno\work\web\wamp\www\4design\wp-content\themes\basics\css

Autres dossiers

  • Javascript : D:\Bruno\work\web\wamp\www\4design\wp-content\themes\basics\js
  • Images : D:\Bruno\work\web\wamp\www\4design\wp-content\themes\basics\img
  • Config. file :

Sortie

  • Environnement : Development
  • Output style : Expanded

Pour ce dernier choix vous avez plusieurs possibilités : Nested, Expanded, Compact ou Compressed. Selon votre environnement de travail, il peut être judicieux de choisir Compressed pour alléger votre fichier CSS. Pour ma part, comme j’ai installé l’extension Autoptimize pour compresser mes fichiers, j’ai choisi l’option Expanded qui me permettra de jeter un oeil sur la manière dont Sass triture mes CSS.

ArgumentError: Error #3214

Selon votre version de Java et son chemin d’installation, une erreur type ArgumentError: Error #3214 peut survenir lors de votre première tentative de surveillance des fichiers SCSS. Pour régler le problème : ouvrez le fichier C:\Program Files (x86)\Scout\javascripts\app\process_interaction.js pour modifier le chemin vers l’application Java dans la fonction javaDir() située à la fin du fichier. En ce qui me concerne, cela donne : path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre1.8.0_45\\bin\\java.exe");

De style.css à style.scss

Copiez votre fichier style.css dans le dossier /sass puis renommez-le style.scss. Notez que Sass propose deux syntaxes et donc deux extensions possibles. La première en .sass utilise une syntaxe différente de CSS (pas d’accolade, toute la logique se trouve dans l’indentation). C’est potable, mais pas très portable. La deuxième .scss est conforme à la syntaxe des feuilles de style CSS. Du coup, n’importe quel fichier CSS valide est aussi un fichier SCSS valide. Cette dernière solution permet de prendre une feuille de style existante et d’ajouter la magie de Sass au gré des besoins et des apprentissages.

→ A cette étape, vous devriez avoir un dossier /sass contenant un fichier style.scss (vous pouvez supprimer votre fichier style.css d’origine).

De style.scss à style.css

Pour compiler votre premier fichier, il suffit d’appuyer sur le bouton « Marche » pour que Scout surveille votre dossier et fasse son travail automatiquement. Si vous voulez tout arrêter, appuyer simplement pour le bouton « Arrêt ». Si vous comptez utiliser Scout avec les thèmes enfants de WordPress, vous aurez intérêt à créer un projet Scout par thème, vu que Scout ne semble pas pouvoir surveiller plusieurs fichiers à la fois dans un même projet.

→ A cette étape, vous devriez avoir modifié votre fichier /sass/style.scss et vérifié que vous avez un fichier css/style.css tout neuf.

Prepros

Si Scout ne vous convient pas, n’hésitez pas à vous tourner vers Prepros, créé par Subash Pathak, plus complet avec une flopée d’options, qui se se limite pas à compiler Sass ou Compass.

Installation et paramétrage de Prepros

Rendez vous à l’adresse prepros.io et lancez l’installation. Commencer un projet est simplissime  : il suffit de glisser-déposer un dossier dans l’interface de Prepros (on peut aussi ajouter un projet avec un bouton « + » je vous rassure) et Prepros lance la surveillance des fichiers situés dans les dossiers less/ sass/ stylus/ scss/ et styl/.

La richesse des options est un plus, mais au final, quand on y connait rien, on clique un peu au petit bonheur la chance dans l’espoir de découvrir le truc qui marche exactement comme on veut. Ceci dit, l’essentiel est de bien choisir le chemin où les fichiers seront compilés. Pour ma part, j’ai choisi l’arborescence suivante : /css/sass/.

L’option qui va bien dans Prepros pour que le fichier compilé soit bien enregistré dans /css :

Paramètres Sass avec Prepros
Comme la vie, Prepros trouve toujours un chemin

Le problème des logiciels c’est que lorsque quelque chose ne fonctionne pas, on ne sait pas trop si le problème vient d’une mauvaise manipulation du logiciel ou d’une mauvaise configuration. Du coup, on se surprend à passer plus de temps à comprendre le fonctionnement du logiciel qu’on en prendrait peut-être pour apprendre à installer Sass et Compass en ligne de commande…

Ligne de commande

Allons-y ! Ok, avant d’y aller on va parler de cette peur de la ligne de commande et de comment la dépasser. Petite précision concernant le symbole $ présent devant les commandes : il ne faut pas le saisir, c’est juste une convention disant que ce qui suit est une commande à saisir dans l’invite de commande…

Installation du serveur Ruby

Sass est écrit en Ruby, créé par Yukihiro ‘Matz’ Matsumoto. Pour l’utiliser, nous avons besoin d’installer le serveur adéquat. Sur Windows, on lance RubyInstaller. Là, il faut choisir la « bonne » version, sachant que toutes les gemmes ne sont pas forcément compatibles avec les versions 64 bits et que la dernière version 2.2.2  est peut-être un peu trop forte pour nous. La prudence et l’ignorance conseillent d’installer la version 2.1.6.

Ouvrons ensuite notre Invite de commande en tapant Windows + R puis cmd dans la fenêtre « Exécuter ». Enfin, tapons $ gem pour afficher des informations succinctes sur les commandes Ruby dont voici le guide complet.

Installation de Sass et Compass

Dans l’invite de commande : $ gem install compass qui devrait installer Compass ainsi que Sass par la même occasion (question de dépendances). Si vous n’avez pas d’erreur, tant mieux pour vous.

Problème ?

J’ai eu mon lot de dysfonctionnements, heureusement résolus avec l’aide de Régis Gaidot @rgaidot sur Twitter :

  • Problème d’encoding : ERROR: While executing gem… <encoding :UndefinedConversionError> résolu avec la commande $ chcp 1252 à saisir avant la commande.
  • Problème de requirement : installation des outils DevKit à l’adresse rubyinstaller.org/downloads dans la partie DEVELOPMENT KIT. Je vous conseille d’extraire cette archive 7zip dans le dossier C:\devkit\ et de suivre ces instructions :
    1. $ cd c:\devkit pour se placer dans le répertoire des outils de développement,
    2. $ ruby dk.rb init pour générer le fichier config.yml qui contient le chemin vers votre installation Ruby,
    3. $ ruby dk.rb install pour installer les composants dans le dossier de l’installation Ruby.

Maintenant vous devriez être prêts à suivre l’article Prise en main de Compass à commencer par la commande $ gem install compass.

Allez, on teste

Si vous ne connaissez pas les commandes DOS, voici la liste des références des commandes DOS. Première chose à connaitre : se déplacer dans l’arborescence des disques durs. Par défaut, l’invite de commande est positionnée sur C:\Users\Bruno> (si votre session s’appelle Bruno, on est bien d’accord). Pour se déplacer sur un autre disque (D: par exemple) il suffit de taper la lettre du lecteur sans la commande cd $ d:

Précisez ensuite le chemin d’installation des fichiers de votre projet « test-sass ». Plusieurs solutions :

  • A l’aide de la commande « cd » : $ cd Bruno\wamp\www\test-sass
  • Avec l’explorateur Windows, depuis le dossier en faisant « Maj + Clic droit » puis en sélectionnant l’option « Ouvrir une fenêtre de commande ici ».
  • Naviguer dans l’arborescence avec l’explorateur Windows et faire glisser l’icône du dossier dans l’invite de commande.

Créez l’arborescence des dossiers avec les commandes « md » (make dir) et « cd » (change directory) :

  • $ md css
  • $ cd css
  • $ md sass
  • $ cd sass
  • $ echo>style.scss @charset 'utf-8';

Cette dernière commande permet de créer un fichier style.scss en précisant l’encodage UTF-8. C’est doublement utile : d’une part, la commande echo> ne peut pas s’empêcher d’ajouter du texte lors de la création du fichier et, d’autre part, le charset doit être le premier élément de la feuille de style. Autant le faire dès cette étape (ceci dit, il semble que Sass et/ou Compass ajoute automatiquement le @charset).

Initialiser un projet avec Sass

Reste à indiquer à Sass 1) le chemin vers lequel il doit compiler le fichier CSS et 2) qu’il doit surveiller le fichier sass/style.scss pour compiler le fichier css/style.css automatiquement. Allons à la racine du projet « test-sass » et lançons la commande suivante : $ sass --watch css/sass/style.scss:css/style.css

Si tout se passe bien l’invite de commande indique le message suivant : Sass is watching for changes. Press Ctrl-C to stop. Ajoutons une déclaration dans style.scss et enregistrons.

Par défaut, la compilation s’effectue avec la syntaxe Nested qui peut ne pas plaire à tout le monde. Comme nous l’avons vu plus haut dans la partie relative à Scout, Sass propose quatre syntaxes : Nested, Expanded, Compact ou Compressed. Ces options s’utilisent de la manière suivante (en remplacement de la commande précédente) : $ sass --watch css/sass/style.scss:css/style.css --style expanded

Initialiser un nouveau projet avec Compass

Pour créer un projet Compass,  la page http://compass-style.org/install/ vous propose de remplir un formulaire pour générer la ligne de commande selon vos paramètres.

Par exemple :

I would like to set up my new project compass named test-sass with no starter stylesheets. I prefer the CSS based (SCSS) syntax and would like to customize my projet’s directory structure using css/sass for the sass source directory, css for the stylesheets output directory, js for the javascripts directory, and img for the images directory.

Les termes en gras sont les choix à faire dans les menus déroulants qui donneront la commande : $ compass create test-sass --bare --sass-dir "css/sass" --css-dir "css" --javascripts-dir "js" --images-dir "img" --fonts-dir "font"

L’option --bare indique à Compass de ne pas créer les fichiers et dossiers par défaut. J’ai ajouté l’option fonts-dir pour les polices de caractères.

Ouvrons ensuite le fichier config.rb qui vient d’être créé et précisons notre syntaxe préférée : output_style = :expanded

Indiquons ensuite à Compass qu’il doit surveiller le projet avec la commande : $ compass watch

Initialiser Sass et Compass dans un projet existant

Pour organiser les projets Compass comme un pro, je ne saurais mieux vous conseiller la lecture des articles Compass au quotidien et Utiliser Compass dans un thème WordPress, la bonne méthode de Mehdi Kabab, spécialiste expert gourou ès Sass & Compass.

Sinon, au niveau le plus basique, WordPress nécessite un fichier style.css à la racine du thème. Créons donc un fichier scss/ contenant le fichier style.scss à la racine du thème et et lançons l’invite de commande suivante :

$ compass create --bare --sass-dir "scss" --css-dir "." --javascripts-dir "js" --images-dir "img" --fonts-dir "font"

Le « . » signifie que le fichier style.css sera compilé à la racine du thème. N’hésitez pas à modifier les noms des répertoires selon votre thème.

Suivie de :

$ compass watch

Et voilà.

Premiers pas avec Sass

Une fois que tout ce petit monde est installé et paramétré, il est temps de mettre les mains dans le cambouis. Vous trouverez plus bas des ressources pour aller plus loin. Voyons déjà ce que Sass (Syntactically Awesome StyleSheets), créé par Hampton Catlin et Natalie Weizenbaum, peut faire pour vous :

  • Import de fichiers avec @import.
  • Variables : couleurs, unités, familles de caractère, etc.
  • Règles imbriquées évitent de répéter les sélecteurs et permettent plein de choses à conditions de faire attention à leur utilisation.
  • Chainage des sélecteurs avec le symbole « & » placé avant le sélecteur à imbriquer.
  • Référencement des sélecteurs parents avec le symbole « & » placé après le sélecteur à référencer.
  • Mixins : fonctions définis avec @mixin que l’on appelle avec le mot-clé @include. Fonctionne comme un copié-collé. Possibilité d’utiliser des arguments, comme une fonction.
  • Héritage de classe permet d’enquiller les sélecteurs à coup de virgules et de leur appliquer les mêmes règles avec le mot-clé @extend. Souvent préférable aux Mixins en raison du poids provoqué par leur copié-collé (poids qui soit dit en passant est largement compensé par la compression gzip que vous appliquerez à votre code avant de le servir à vos visiteurs).
  • Opérations mathématiques : addition, soustraction, multiplication, division (et le reste de la division euclidienne).
  • Conditions : comme tout langage informatique, Sass utilise les conditions comme @if, @else if, @else.
  • Boucles : Sass propose aussi les structures de contrôles comme les boucles @for, @each et @while.
  • Fonctions intégrées : traitement des chaines de caractères, gestion des couleurs, gestion des unités, gestion des sprites.
  • Commentaires privés : débutent par // et ne sont pas compilés, contrairement aux commentaires CSS /* blabla */
  • Module pour les couleurs : permet de travailler avec des unités diverses et d’effectuer des opérations ou d’appliquer des fonctions pour jouer sur la transparence, la saturation, la luminosité, etc.

Import de fichier

Commençons par « modulariser » le fichier CSS principal. Cette opération devrait être facilitée si votre feuille de style est déjà divisée en rubriques :

[pastacode lang= »css » message= »Organisation de votre feuille de style en rubriques » highlight= » » provider= »manual »]

 /* ==========================================================================
    3.  Vertical Rhythm Tool - http://soqr.fr/vertical-rhythm/ --- 16px/1.5
    ========================================================================== */

[/pastacode]

Ainsi, Sass permet d’avoir un fichier de base, comme style.scss, dans lequel on peut référencer différentes rubriques en autant de fichiers partiels. Pour éviter de tout mélanger, la tradition veut que l’on nomme ces partiels en commençant par le symbole underscore : _.

[pastacode lang= »css » message= »Organiser votre fichier style.scss avec les partiels » highlight= » » provider= »manual »]

@import "dresscode.scss";
@import "general.scss";
@import "vertical-rythm.scss";
@import "primary-content.scss";
@import "secondary-content.scss";
@import "horizontal-rythm.scss";
@import "print.scss";

[/pastacode]

Notons que les fichiers partiels ne sont pas référencés avec le symbole underscore dans le fichier qui les appelle. La magie du truc, c’est que tous ces fichiers partiels ne feront qu’un (fichier style.css) pour les gouverner tous.

Cette fonctionnalité, associée à la validation des CSS en temps presque réel avec des informations sur les erreurs, vaut le coup d’utiliser un préprocesseur.

Attention toutefois au fait que cette fonction @import semble limitée aux fichiers SCSS. En gros, il n’est pas possible en l’état d’importer un simple fichier CSS, sauf à changer son extension en .scss bien sûr.

Suite à des demandes pressantes de la communauté, Chris Eppstein a commis le module sass-css-importer qui permet d’y remédier (bien que personnellement, je trouve que renommer un fichier n’est pas le plus compliqué dans ce métier).

Variables

[pastacode lang= »sass » message= »Des variables simples pour définir des choses simples » highlight= » » provider= »manual »]

$hot-pink: #bc436c
color: $hot-pink

[/pastacode]

[pastacode lang= »css » message= »Variables et fonctions Sass sur les couleurs » highlight= » » provider= »manual »]

$default-color: gray;
$font-color: darken($default-color, 60%);
$light-color: lighten($default-color, 20%);
$dark-color: darken($default-color, 20%);

[/pastacode]

→ Lire : Stop using so many Sass variables.

Sélecteurs imbriqués, héritage de classes, chainage des sélecteurs et référencement du sélecteur parent

Compass contient plusieurs méthodes pour « clearer » les float : clearfix, legacy-pie-clearfix et pie-clearfix. Mais il se peut que vous vouliez utiliser votre propre méthode. Pour ma part, j’ai l’habitude d’utiliser celui proposé par Nicolas Gallagher que l’on retrouve dans HTML5 Boilerplate (sans le has layout pour les versions 6/7 d’Internet Explorer) :

1. Exemple CSS :

[pastacode lang= »css » message= »Un clearfix compact pour gérer les floats » highlight= » » provider= »manual »]

.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}
.cf:after {
    clear: both;
}

[/pastacode]

2. En utilisant les sélecteurs imbriqués, on peut obtenir le code SCSS suivant :

[pastacode lang= »css » message= »Le clearfix à la sauce SCSS avec les sélecteurs imbriqués » highlight= » » provider= »manual »]

.cf {
  &:before,
  &:after {
      content: " ";
      display: table;
  }
  &:after {
      clear: both;
  }
  *zoom: 1;
}

[/pastacode]

3. Pour ensuite l’utiliser sur l’exemple :

[pastacode lang= »css » message= »Appliquer le clearfix avec @extend » highlight= » » provider= »manual »]

.exemple {
  width: 48%;
  margin-right: 2%;
  float: left;
  @extend .cf;
  p {
    padding-top: 10px;
  }
}

[/pastacode]

4. Une fois compilé, notre fichier CSS contient :

[pastacode lang= »css » message= »Résultat de la compilation » highlight= » » provider= »manual »]

.cf, .exemple {
  *zoom: 1;
}
.cf:before, .exemple:before, .cf:after, .exemple:after {
  content: " ";
  display: table;
}
.cf:after, .exemple:after {
  clear: both;
}
.exemple {
  width: 48%;
  margin-right: 2%;
  float: left;
}
.exemple p {
  padding-top: 10px;
}

[/pastacode]

Passons à autre chose et voyons maintenant comment référencer le sélecteur parent :

[pastacode lang= »css » message= »Référencer le sélecteur parent » highlight= » » provider= »manual »]

/* SCSS */
h3 {
  font-size: 20px;
  margin-bottom: 10px;
  .some-parent-selector & {
    font-size: 24px;
    margin-bottom: 20px;
  }
}

/* CSS */
h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

[/pastacode]

→ Lire : The ampersand & a killer Sass feature.

Placeholder

Petite subtilité avec l’utilisation de @extend, il est possible d’utiliser un placeholder au lieu d’une classe :

[pastacode lang= »css » message= » » highlight= »Héritage via le placeholder % » provider= »manual »]

/* SCSS */
%center {
      display: block;
      margin-left: auto;
      margin-right: auto;
}
.container {
      @extend %center;
}
.image-cover {
      @extend %center;
}

/* CSS */
.container, .image-cover {
      display: block;
      margin-left: auto;
      margin-right: auto;
}

[/pastacode]

L’intérêt du placeholder par rapport à l’utilisation d’une classe, c’est que le premier n’apparait pas en tant que tel dans le code généré, mais uniquement en tant que résultat quand il est utilisé avec @extend. En gros, si vous avez déjà des classes .center dans votre code HTML, autant s’en servir, en revanche, si ce n’est pas le cas, tournez-vous vers le placeholder %.

Ceci dit, même avec une classe .center existante, il peut être intéressant d’utiliser le placeholder % pour l’appliquer sur d’autres éléments sans être obligé d’ajouter des classes supplémentaires dans le code HTML.

→ Lire :

Mixins

[pastacode lang= »css » message= »Dimensionner un élément » highlight= » » provider= »manual »]

/* SCSS */
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

/* CSS */
icon {
      @include size(32px);
}
.cover {
      @include size(100%, 10em);
}

[/pastacode]

→ Lire :

[pastacode lang= »css » message= »Alors t’y es @content ? » highlight= » » provider= »manual »]

/* SCSS */
@mixin media($width) {
  @media only screen and (max-width: $width) {
    @content;
  }
}
/* Usage */
@include media(320px) {
  background: red;
}

/* Sortie CSS */
@media only screen and (max-width: 320px) {
  background: red;
}

[/pastacode]

[pastacode lang= »css » message= »ou t’y es pas @content ? » highlight= » » provider= »manual »]

/* SCSS */
@mixin attention() {
    &:hover,
    &:active,
    &:focus {
        @content;
    }
}

/* Usage */
a {
    font-weight: bold;
    text-decoration: none;
    color: #c00;
    @include attention() {
        outline: none;
        color: #09f;
    }
}

.btn {
    background-color: #09f;
    @include attention() {
        background-color: darken(#09f, 10%);
    }
}

/* Sortie CSS */
a {
  font-weight: bold;
  text-decoration: none;
  color: #c00;
}

a:hover,
a:active,
a:focus {
  outline: none;
  color: #09f;
}

.btn {
  background-color: #09f;
}

.btn:hover,
.btn:active,
.btn:focus {
  background-color: #007acc;
}

[/pastacode]

[pastacode lang= »css » message= »Augmenter (un peu) la spécificité d’un sélecteur » highlight= » » provider= »manual »]

/* SCSS */
@mixin create-context($classes...) {
  @each $class in $classes {
    .#{$class} & {
      @content;
  }
}

@mixin context--alternate-template {
  @include create-context(about, blog) {
    @content
  }
}

/* SCSS Usage */
.header {
  height: 12em;
  background: red;

  @include context--alternate-template {
    background: green;
  }
}

/* Sortie CSS */
  .header {
    height: 12em;
    background: red;
  }
  .about .header {
    background: green;
  }
  .blog .header {
    background: green;
  }

[/pastacode]

[pastacode lang= »css » message= »BEMy ta CSS » highlight= » » provider= »manual »]

/* SCSS */
@mixin element($name) {
  @at-root #{&}__#{$name} {
    @content;
  }
}

@mixin modifier($name) {
  @at-root #{&}--#{$name} {
    @content;
  }
}

/* SCSS Usage */
.block {
  color: red;

  @include element(element) {
    color: green;

    @include modifier(modifier) {
      color: blue;
    }
  }
}

/* Sortie CSS */
.block {
  color: red;
}

.block__element {
  color: green;
}

.block__element--modifier {
  color: blue;
}

[/pastacode]

→ Lire :

Conditions, opérateurs, et boucles

[pastacode lang= »css » message= »Poser ses conditions avec @if @elseif et @else » highlight= » » provider= »manual »]

/* SCSS */
// définition des variables $shadow et $color
$shadow: '';
$color: orange;

// Si $color est égale à 'orange'
@if ($color == orange) {
    // Alors shadow vaut :
    $shadow: 0 0 5px black
}
// Sinon si $color est égale à 'blue'
@elseif ($color == blue) {
    // Il est également possible de redéfinir la variable
    $color: pink;
    $shadow: 0 5px 0 red;
}
// Sinon, $shadow prendra les valeurs
@else {
    $shadow: 5px 5px white;
}

.ma-class {
    color: $color;
    box-shadow: $shadow;
}

/* CSS */
.ma-class {
  color: orange;
  box-shadow: 0 0 5px black; }

[/pastacode]

[pastacode lang= »css » message= »@for your people » highlight= » » provider= »manual »]

/* SCSS */
@for $i from 1 through 6 {
    .grid-#{$i} {
        width: 100px*$i;
    }
}

/* CSS */
.grid-1 {  width: 100px; }
.grid-2 {  width: 200px; }
.grid-3 {  width: 300px; }
.grid-4 {  width: 400px; }
.grid-5 {  width: 500px; }
.grid-6 {  width: 600px; }

[/pastacode]

[pastacode lang= »css » message= »Presque la même chose avec @while » highlight= » » provider= »manual »]

/* SCSS */
$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

/* CSS */
.item-6 { width: 12em; }
.item-4 { width: 8em; }
.item-2 { width: 4em; }

[/pastacode]

→ Lire :

Fonctions intégrées

[pastacode lang= »css » message= »Gérer la transparence à partir d’une couleur hexadécimale » highlight= » » provider= »manual »]

/* SCSS */
body {
    color: rgba(#fff, .8);
}
header {
    color: darken(rgba(#fff, .8), 10%);
}

/* CSS */
body {
  color: rgba(255, 255, 255, 0.8);
}
header {
  color: rgba(230, 230, 230, 0.8);
}

[/pastacode]

→ Lire :

Quelques mots sur Compass

Compass est à Sass ce que jQuery est à JavaScript : un ensemble de variables, de mixins et de fonctions créés par Chris Eppstein permettant d’étendre les fonctionnalités de Sass.

Pour profiter de Compass, il faudra utiliser la règle @import "compass"; dans le fichier style.scss.

Cette règle va importer trois modules intégrant un certain nombre de variables, de mixins et de fonctions dans votre projet : CSS3, Typography et Utilities. Les modules Layout et Reset doivent être importés à part avec @import « compass/layout »; et @import « compass/reset »;.

Pour des raisons de performances lors de la compilation, il peut être judicieux de n’importer que les modules nécessaires au projet, par exemple : @import "compass/typography/vertical_rhythm";.

→ Lire : How To Use Compass Vertical Rhythms pour plus d’informations.

Installer d’autres modules

Les autres modules s’installent comme Compass via l’invite de commande.

Par exemple, pour installer Susy, il suffit de :

  1. de saisir : $ gem install susy (n’oubliez pas la commande $ chcp 1252 en cas de problème d’encodage),
  2. d’invoquer Susy dans votre projet, soit au moment de sa création avec l’option --usign susy par exemple $ compass create --using susy <project name>, soit après coup via la commande $ compass install susy,
  3. de l’importer dans votre fichier de travail style.scss avec @import "susy";.

Utiliser Susy :

Ressources pour apprendre Sass & Compass

Série d’articles sous la cascade :

Autres références

Quelques avis sur les préprocesseurs

Remerciements

Merci à ceux qui ont pris le temps de me répondre sur Twitter pendant la rédaction de cet article et qui ont fait avancer ma réflexion :

Publié le par Bruno Bichet