Introduction à SCSS, Compass et Foundation¶

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.

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.