Introduction à SCSS, Compass et Foundation

SCSS vs Less

CSS est un language de mise en forme, actuellement en version 3 non finalisée mais stable.

Au début des années 2000 après l’évangélisation en faveur de l’utilisation de CSS (et abandonner les attributs html de mise en forme) un problème s’est rapidement posé : la difficulté à maintenir de grands ensembles de styles pour des mises en formes évolués. Ceci découlait du fait que CSS n’est pas un language de programmation (pas de variables, pas de boucles, pas de conditionnement, etc..).

Tout celà imposait la rédaction laborieuse de longues feuilles de styles à accumuler, mal organisés, avec de nombreuses répétitions, etc..

Est alors venu une solution: étendre le language CSS pour combler ses manques. Pour pallier le fait que les navigateurs ne pouvaient pas reconnaître ces extensions de CSS, on utilise un compilateur permettant de produire du CSS aux normes conventionnelles à partir des sources rédigés avec une extension.

Comparer une de ces extensions à CSS lui même est un peu comme comparer un simple document en texte brut à du HTML. Car un document HTML n’est qu’un fichier de texte brut utilisant une norme reconnue par les navigateurs pour mettre en forme le contenu, au final on peut dire que HTML n’est qu’une extension du texte brut.

Les deux grandes normes connues actuellement sont SCSS et LESS.

Présentation Less

Less est le language utilisé par Bootstrap, il est de ce fait très utilisé. Il a le mérite de posséder une librairie Javascript capable de transformer à la volée une source Less vers du CSS qui permet en développement de charger directement des fichiers *.less sur un site sans avoir à le compiler. Évidemment en production, il vous faudra tout de même compiler vos sources Less pour des raisons de performances.

Less souffre de plusieurs manques par rapport à SCSS, notamment il ne possède pas d’expressions pour pratiquer des conditions (IF/ELSE). En résumé est une extension plus timide de CSS.

Ce document n’abordera pas le sujet de Less car il n’est pas utilisé chez Emencia.

Présentation SCSS

SCSS est l’évolution d’une précédente extension nommée SASS, il est à ce titre publié par l’équipe du projet SASS, mais ils ne sont pas à confondre car SCSS est plus évolué et leur syntaxe diffère quelque peu.

SCSS est utilisé par le projet Foundation au moyen de Compass qui est un compilateur additionnel qui supplante le compilateur original de SCSS. De nos jours il est devenu presque indissociable de SCSS. Son succès vient du fait qu’il dispose de nombreuses fonctions (mixins) utiles tel que pour gérer les préfixes propriétaires des navigateurs pour certaines propriétés CSS3.

Chez Emencia, on utilise toujours SCSS+Compass, la quasi totalité de nos sources SCSS dépendent de librairies de Compass. Notez que lors de l’installation de Compass, SCSS sera automatiquement installé.

Compilateur SCSS

L’outil procédera à la compilation de toute les sources SCSS qu’il trouvera sauf celles dont le nom de fichier est préfixé par un caractère _. Ce genre de fichiers sont appelés des sources partielles, le compilateur considérera alors que ces sources partielles n’ont pas à être compilés en CSS et de ce fait les sources partielles n’ont d’intérêt que de pouvoir être importés dans une autre source SCSS qui produira bien un fichier CSS.

Par exemple la structure suivante :

- base.scss
- _settings.scss
- components/_foo.scss
- components/bar.scss

Ne produira que les CSS suivants :

- base.css
- components/bar.css

Dans vos sources, pour importer une autre source SCSS vous n’avez pas besoin de préciser ce préfixe, si vous lui indiquez @import settings il cherchera d’abord le fichier settings.scss puis _settings.scss. Vous aurez noté dans cet exemple que lors de l’importation vous n’avez pas besoin de spécifier le suffixe d’extension .scss car le compilateur sait qu’il doit toujours chercher ce genre de fichiers.

Enfin sachez que SCSS étant une extension de CSS, toute source CSS valide est une source SCSS valide et peut donc être importé dans un fichier SCSS.

Imbrication des règles de styles

L’avantage le plus visible en premier lieu c’est l’imbrication. SCSS permet d’organiser ses styles d’une manière plus naturelle que CSS, car il permet d’inclure des styles dans des styles qui héritent des sélécteurs de leur parents alors que pour CSS vous devez répéter le sélécteur complet du parent à chaque fois.

Exemple en CSS :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
div.column{
    border: 1px solid #000000;
}
div.column p{
    margin: 10px;
}
div.column p a{
    text-decoration: none;
}
div.column p a:hover{
    text-decoration: none;
}

Que vous pourrez organiser comme ceci en SCSS :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
div.column{
    border: 1px solid #000000;

    p{
        margin: 10px;

        a{
            text-decoration: none;

            &:hover{
                text-decoration: none;
            }
        }
    }
}

Au premier abord, cela semble plus verbeux, mais notez bien l’indentation et le fait que tout ces styles sont proprements rangés dans leur style parent. C’est un énorme gage de lisibilité.

Donc pour un style .bar contenu dans un style .foo, SCSS va comprendre que le sélécteur à générer sera .foo .bar.

Et si besoin, vous pouvez préfixer un sélécteur avec & qui indique que le style est attaché à son parent ce qui donne pour &.bar le sélécteur suivant .foo.bar.

Attention à toujours bien respecter l’indendation de vos imbrications. SCSS n’a que faire de l’indentation mais c’est un plus pour la lisibilité tant qu’elle est correctement utilisée : dès que vous ouvrez un nouveau sélécteur, indentez.

Cela n’a rien avoir avec SCSS mais pour suivre ce principe de lisibilité, ne faite pas de déclaration sur une ligne unique pour le sélécteur et des propriétés, ne définissez pas plusieurs propriétés sur une même ligne et fermez toujours vos propriétés avec un point virgule même pour une propriété unique.

Variables

À la manière d’un vrai language de programmation, vous pouvez créer des variables qui mémorisent des valeurs que vous pourrez utiliser ensuite où vous le souhaitez.

1
$ma-variable: 14px;

Ce n’est pas indispensable mais très utile pour éviter la répétition de valeurs, contenir des états ou bien le calcul de certaines règles (comme des espacements, taille de polices, etc..). Les variables sont surtout utiles pour créer des feuilles de styles d’applications pour leur permettrent de changer des options tels que les couleurs, polices, etc.. sans avoir à toucher à tout le reste.

Les variables peuvent être globales à toute une feuille ou bien locales à une fonction. De plus il existe la propriété !default qui permet de créer une variable qui sert de valeur par défaut si elle n’a pas été déja définie.

Par exemple :

1
2
3
4
5
6
$ma-variable: 11px;
$ma-variable: 14px !default;

.foo{
    font-size: $ma-variable;
}

Produira en CSS :

1
2
3
.foo{
    font-size: 11px;
}

Importations

Pour en finir avec les longues feuilles CSS monolitiques, il y’a l’importation.

Le principe est d’importer dans votre SCSS une autre feuille SCSS dont le contenu sera placé à l’endroit où vous l’importez. C’est un peu comme la fonction @import de CSS mais en plus évolué.

Par exemple, avec CSS si vous souhaitez scinder les styles d’une application de blog, de ceux d’une application de forum, vous devrez en faire des fichiers CSS différents que vos pages HTML (ou vos feuilles CSS) importeront. Avec SCSS, vous pouvez directement importez les feuilles SCSS du blog et du forum dans une feuille SCSS principale pour produire une unique feuille CSS.

C’est d’abord intéressant en matière de performances, car il est recommandé d’importer le moins de fichiers possibles dans une page HTML (pour éviter au navigateur d’effectuer de multiples connexions). C’est aussi pratique pour l’organisation, vous pouvez alors scinder vos styles en plusieurs feuilles SCSS que vous importerez ou non selon vos besoins, sachant que vous pourrez conditionner les importations selon des variables. Résultat tout est compartimenté, la lisibilité est encore améliorée.

Mixins

Les mixins sont apparentés à des fonctions d’un language de programmation. La déclaration d’un mixin ne provoque pas la génération de son contenu dans le fichier CSS et il accepte des arguments locaux.

Par exemple le code SCSS suivant :

1
2
3
4
@mixin sample-page {
    background-color: #000000;
    color: #ffffff;
}

Ne génère rien du tout lors de sa compilation en CSS.

Par contre le code SCSS suivant :

1
2
3
4
5
6
7
8
@mixin sample-page {
    background-color: #000000;
    color: #ffffff;
}

body{
    @include sample-page;
}

Sera compilé en CSS :

1
2
3
4
body{
    background-color: #000000;
    color: #ffffff;
}

Les mixins acceptent des variables en arguments si on leur en définit dans leur déclaration, de sorte que vous passez un context local à vos mixins.

Par exemple :

1
2
3
4
5
6
7
8
@mixin sample-page($bg-color, $font-color: #ffffff) {
    background-color: $bg-color;
    color: $font-color;
}

body{
    @include sample-page(#000000);
}

Sera compilé en CSS :

1
2
3
4
body{
    background-color: #000000;
    color: #ffffff;
}

Vous y noterez que l’argument $bg-color est obligatoire, par contre $font-color définit une valeur par défaut, c’est alors un argument optionnel.

On utilise en générales ces fonctions pour contenir des styles plus ou moins identiques dans plusieurs styles différents qui n’ont pas les mêmes sélécteurs. Par exemple pour appliquer une ombre portée sur du texte de couleurs différentes ou un ombrage différent, on peut créer un mixin dédié à ajouter l’ombre portée et qui acceptent des arguments pour définir sa couleur et l’épaisseur de l’ombre.

Les mixins, comme les variables sont utilisés lorsque l’on commence à regrouper des pratiques communes dans une librairie pour éviter de se répéter, mais ils requiert une petite notion de programmation pour être correctement utilisés.

Opérateurs de calculs

SCSS permet de faire des calculs. Par exemple pour calculer une marge extérieur (margin) à partir d’un ratio et d’une taille de police globale, vous pouvez calculer la taille du margin en multipliant la taille de police globale au ratio :

1
2
3
4
5
$global-font-size: 16px;

div.foo{
    margin: $global-font-size*1.2;
}

SCSS sait gérer les unités de tailles dans vos calculs. Par exemple si vous définissez une variable $foo: 14px; que vous multipliez à un nombre comme $bar: 2;, la valeure calculée sera 28px. Les unités reconnues sont seulement celles disponibles dans la norme CSS (em, px, rem, %, etc..).

Notez bien que ces calculs servent lors de la compilation uniquement et les valeurs auront été calculés dans le CSS produit.

Attention à bien vous renseigner sur la syntaxe des opérateurs et unités, elle est assez stricte et peut amener à des incongruités si vous essayez de combiner des unités différentes.

CSS calc()

Depuis récemment CSS3 permet de faire des calculs de valeurs mais avec la Fonction calc() qui ne gère pas encore les variables (à ce jour uniquement Firefox 30 à implémenté cette fonction). Cette fonction reste cependant utile dans certains cas de figures où la compatibilité avec les anciens navigateurs n’est pas importante.

Pour aller plus loin

Ceci n’est qu’un résumé de base du minimum requis pour créer et éditer du SCSS, il vous reste de nombreuses autres fonctionnalités à découvrir et des comportements à approfondir, ayez toujours la Documentation de référence SASS à portée de clic, ou bien la Documentation de résumé de SASS.

Compass

Compass est un compilateur de sources SASS vers CSS, il ajoute de nombreuses fonctionnalités et facilités pour améliorer la rédaction de feuilles CSS.

Là ou le compilateur inclus dans SASS ne fait que gérer la compilation de simples fichiers de sources, Compass gère des projets apportant une notion évoluée de librairies

Configuration d’un projet

Un projet Compass dispose toujours d’un fichier de configuration, habituellement config.rb contenant les options de configuration du projet pour lui indiquer des chemins (sources, images, etc..) et comment générer le CSS (indenté, compressé, etc..).

On peut aussi y définir des chemins supplémentaires où il peut aller chercher des sources en plus de votre répertoire principale de sources du projet, ces chemins supplémentaires sont en général des librairies SASS, tel que Foundation. Notez que ces librairies ne sont au final que d’autres sources SASS que vous pourriez tout aussi bien utiliser directement en les recopiant dans vos sources, mais ceci n’est pas très maintenable et donc toujours à éviter.

Pour différentes raisons, un projet Compass peut contenir plusieurs fichier de configuration différents si vous devez utiliser vos sources différemment selon un environnement. Par défaut Compass tente toujours d’utiliser config.rb mais vous pouvez lui spécifier un autre fichier en utilisant l’argument -c suivit du chemin du fichier de configuration.

Si vous ne trouvez pas les sources d’un composant inclut au moyen de @import c’est qu’il est probablement dans une librairie configurée dans le projet où dans une librairie Ruby installée sur votre système.

Cache

Compass utilise un système de cache très performant lui évitant de recompiler des sources qui n’ont pas changés, de sorte qu’à chaque compilation que vous lui demandez, il ne recompile pas à chaque fois toute les feuilles CSS, seulement celle qui ont changés.

Pour cela il créé un répertoire caché .sass-cache dans votre projet où il mémorise certaines informations. Ne transmettez jamais ce répertoire. Si jamais vous réutiliser un projet pour en créé un nouveau, n’oubliez pas de le supprimer du nouveau projet.

Enfin, dans certaines cas de figures le cache peut poser problème, vous pouvez demander à Compass de l’ignorer et l’écraser en utilisant l’argument --force.

Compilation

En ce qui concerne la recherche de fichiers, Compass hérite des comportements du compilateur SCSS.

Pour compiler vos sources à chaque fois, vous utiliserez simplement la commande compass compile depuis le répertoire de votre projet.

Compass dispose aussi d’une commande compass watch pour surveiller en continu vos sources et recompiler à la volée chaque source dès leur modification. Cette commande surveille simplement les fichiers qui changent et effectue leur compilation tout comme le fait la commande compile.

Fonctionnalités et facilités

Leur liste est trop longue pour les décrire ici, consultez la Documentation de référence de Compass pour leur liste et détail. La documentation de Compass n’est pas parfaite mais elle dispose de nombreux exemples contenant l’équivalence source SCSS/CSS.

L’intégralité des propriétés de CSS3 y sont couvertes par des mixins de facilités pour rédiger les propriétés propriétaires de tout les navigateurs pour assurer une compatibilité optimale car rappelez vous que CSS3 n’est pas encore finalisé et nombreuses de ses propriétés ont été implémentés de manière propriétaires par les anciens navigateurs.

Foundation

Foundation est un framework CSS de la dernière génération sur le même principe que Bootstrap, il contient une structure de base et des composants reproduisant les mises en forme basique les plus répandus. Ceci permet d’avoir une cohérence dans la rédaction des styles CSS, de toujours reposer sur des bases saines et de bénéficier de techniques éprouvés sans avoir à tout rassembler manuellement à chaque fois.

Foundation est modulaire, c’est à dire que vous pouvez n’utiliser que les composants dont vous avez besoin et que vous pouvez customiser certains de leur styles juste en modifiant des variables de configuration.

La grande force de Foundation est d’avoir été développé avec Compass+SCSS, il est aussi possible de l’utiliser avec les sources CSS fournis sur son site, mais vous perdez alors les facilités de customisation.

Configuration

Foundation utilise un fichier _settings.scss qui contient toute ses variables de configuration utilisés dans ses composants. Vous pouvez créer ce fichier à la base de votre projet Compass pour y modifier des variables de configuration selon vos besoins. La documentation des composants de Foundation liste les variables qu’ils utilisent.

Si vous ne créez pas ce fichier, Foundation utilisera les variables de son propre fichier dans ses sources. Attention, ne modifiez jamais directement le fichier de configuration des sources de Foundation lui même.

Grilles

Les grilles de Foundation sont un moyen de faciliter la disposition des contenus à la manière de cadres que l’on dispose dans une grille parfaite et souple. Le principe est de disposer des colonnes dans des lignes. Vous pouvez n’utiliser qu’une seule ligne pour tout vos cadres de colonnes ou bien utiliser plusieurs lignes pour bien délimiter certains cadres.

Vous pouvez aussi indiquer des tailles différents à vos cadre selon la résolution. Et si vous avez un cadre unique dans une ligne, vous pouver le centrer.

Il y a d’autres options et concepts sur les grilles, mais le plus important est que par défaut les largeurs des colonnes reposent sur un multiple de 12. C’est à dire que vous pourrez avoir 3, 4 ou 6 colonnes de la même largeur sur une même ligne, mais que vous ne pourrez jamais en avoir 5, 7 ou 10. Ceci est un comportement par défaut que vous pouvez changer depuis le fichier de configuration.

Composants

Il y a une multitude de composants disponibles dans Foundation, ce document n’a pas vocation à tous les décrire et vous devrez donc consulter la Documentation de Foundation 5.

Mais il faut savoir que certains composants requiert une partie en Javascript pour fonctionner correctement, que Foundation fournit tout prêt à l’emploi dans sa propre librairie Javascript. De plus la documentation indique les composants qui le requiert.