Pour accéder à toutes les fonctionnalités de ce site, vous devez activer JavaScript. Voici les instructions pour activer JavaScript dans votre navigateur Web.

Que l’on soit professionnel ou amateur la maintenabilité de son site reste une priorité. Nous rencontrons tous des problèmes avec les nouvelles propriétés CSS3 qui se font de plus en plus nombreuses. Nous nous demandons en permanence comment être compatible avec le plus grand nombre de navigateur et comment avoir un code des plus optimisé... C’est là que les préprocesseurs comme Sass, Less rentrent en jeu et nous ouvrentdes possibilités proches des langages de développement purs.

“MSSL” est un portail didactique pour mon projet de fin d'année en tant que web designer. Je vais faire mon maximum pour démystifier le préprocesseur Sass. L’objectif est d’expliquer de manière simple et efficace comment bien démarrer avec Sass dans un premier temps puis comment utiliser Compass. Je m'appuierai sur la documentation officielle de Sass (notez qu'elle manque cruellement de clareté) et sur d'autres sites comme l'excellent Grafikart ou encore Better Sass Doc du messi Kaelig. Considérez que MSSL est aujourd'hui une version Beta, je l'améliorerai avec le temps et ferai en sorte de rester le plus simble possible.

Nous ne verrons pas toutes les fonctionnalités de Sass car il n'est pas indispensable de toutes les connaîtres pour en tirer profit, mais nous nous concentrerons sur les fondamentaux de ce magnifique environnement de développement.
Il est bon de noter que je ne suis pas un maître du Sass ou des langages web, à l'heure ou j'écris ces lignes, je ne suis en formation que depuis deux mois je ferai de mon mieux pour ne pas vous transmettre de bétises :)

Installation

Je partirai du fait que vous êtes à l’aise avec le html et le css, si ce n’est pas le cas je vous conseille de commencer par là et de suivre des cours chez Open Classroom par exemple. Pour les autres, nous allons nous mettre au même niveau en téléchargeant le complilateur “Koala app”, ainsi que le répertoire de travail et c’est tout.

LET'S GO!

Une petite présentation s'impose, Sass c'est quoi ?

Sass est le nom de la technologie utilisée comme préprocesseur css, il est possible de travailler le sass avec deux formats de fichiers différents les ".sass" et les ".scss". Ici, nous ne travaillerons qu'avec des fichiers .scss (je trouve le .scss plus lisible et il ressemble au css) et notre compilateur graphique (Koala app) fera automatiquement la conversion en .css pour nous.
C'est magique !

Ce qu'il faut donc retenir :

Sass est un langage de développement css, il accepte deux formats de fichier le .sass et le .scss (c'est à vous de faire votre choix). Ils seront ensuite convertis automatiquement en .css par notre compilateur graphique.

schema_preprocesseur

Pourquoi installer un compilateur graphique ?

Afin de se concentrer sur Sass et uniquement sur Sass, nous ne verrons pas pour l'instant les installations "Geek" pour convertir nos fichiers .scss en .css qui s'effectuent en lignes de commandes, mais gardez en tête qu'il est fortement recommandé de s'y intéresser pour avoir plus de contrôle sur votre projet qu'avec un compilateur graphique. Ne soyez pas inquiets le compilateur sera largement suffisant et encore une fois, nous simplifira l'apprentissage de Sass.

Allez c'est parti !

Direction Koala app et on installe la version qui concerne son sytème d'exploitation. Je recommande Koala app car il est gratuit, multi-plateforme et en français ce qui fait de lui un outil par défaut indispensable ;)

Une fois installé, on a presque fini le travail de mise en place. il ne vous reste plus qu'à ajouter le répertoire de travail (que j'ai mis à votre disposition plus haut) dans Koala.

Répertoire de travail

Comme vous pouvez le voir, il n’y a rien de particulier dans ce dossier, la seule chose est le fichier config.rb. Il sert à la configuration des convertions avec koala, si votre strucuture de dossier reste tout le temps similaire à celle-ci, vous n’aurez pas besoin de l’éditer, sinon je vous invite à le modifier selon vos envies.

repertoire_travail

Les bases

Les différents types de commentaires.

Comme vous le savez, il est primordiale de bien indenter et commenter ces css et autres html afin d’avoir un code toujours plus maintenable et clair. Pour vous (si vous revenez sur votre projet 6 mois plus tard), si vous travaillez à plusieurs ou tout simplement si vous soumettez votre projet sur github par exemple.


Il existe deux types de commentaires, ceux qui seront visibles dans le code source une fois compilé et (vous l’aurez deviné) ceux qui ne le sont pas grâce à la technologie Sass.


L’intérêt d’avoir des commentaires uniquement dans les fichiers sources est de ne pas alourdir les fichiers de production avec des lignes de commentaires dont l’utilisateur lambda se moquent. Ainsi avec le commentaires dit “silencieux” et Sass notre code n’en sera que plus léger et digeste pour le navigateur.

/*Sass*/

/*Ceci est un commentaire
visible*/
/*Sass*/

//Ceci est un commentaire
silencieux

Conclusion

Il existe deux types de commentaires, les commentaires visibles et les commentaires silencieux. Il est bon de ne pas sous estimer les commentaires silencieux car ils préservent de précieux octets surtout pour les versions mobiles qui prennent de plus en plus de part de marché. Soyez-donc vigilents !


Les bases du Sass

Nous allons maintenant voir les fonctions de bases de Sass, comme vous allez pouvoir le constater, il n’y à rien de compliqué juste un peu de mémoire à faire travailler pour un gain de temps collossal. Gardez en mémoire qu’il est tout à fait possible d’écrire du css “standard” dans un .scss.


Les $variables

Créer sa variable

Si vous avez déjà fait un peu de PHP, vous ne serez pas perdu. Pour les autres une variable sert à stocker des informations de couleur, de taille,... afin de les réutiliser plus tard. Par convention on crée/déclare ses variables en haut de document.

/*Sass*/

$nom-de-variable: red;

/* ou encore */

$nom-de-variable: 5em;

Utiliser sa variable

Maintenant que vous avez créé cette variable, c’est cool mais il faut maintenant s’en servire et vous allez voir, encore une fois c’est vraiment très simple.

/*Sass*/

$width: 5em;
$CoulPrincipale: red;

#main {
width: $width;
color: $CoulPrincipale;
}

Conclusion

Les variables offrent une flexibilité énome dans le développement css. Prenons l’exemple de MSSL, si je suis malin, je crée une variable $CoulPrincipale: #293540 et tout ce qui sera bleu foncé pourra être changé en un coup sur tout mon site, plutôt que de faire des “rechercher/remplacer” ou je ne sais quelle autre méthode.


Les @mixin

Créer sa mixin

Si vous avez déjà fait un peu de PHP, on peut l’apparenter à une fonction. Pour les autres une mixin sert à attribuer à un nouvel élément html des paramètres width et height (par exemple) déjà créés auparavant. Bon dis comme ça je ne sais pas si c’est bien clair, mais l’exemple va vous faire comprendre tout ça.

Pour cet exemple, nous allons créer une mixin qui règlera nos .boite et .boite-2 afin d’éviter de dupliquer des lignes de css.

/*Html*/
				
class="boite"
class="boite-2"
/*Sass*/

@mixin taille-boite {
width: 100px;
height: 100px;
}

Utiliser sa mixin

Maintenant que nous l’avons créé, il ne nous reste plus qu’à dire à sass “Applique à .boite et .boite-2 la @mixin taille-boite" et sa se fait avec le @include.

/*Html*/
				
class="boite"
class="boite-2"
/*Sass*/

@mixin taille-boite {
width: 100px;
height: 100px;
}

.boite, .boite2 {
@include taille-boite;
}

Je vous vois venir, vous vous dîtes qu’en css ça ne nous aurait pas coûté beaucoup plus de lignes... Oui, dans ce cas précis j’ai choisi volontèrement un exemple basic pour qu’il parle aux plus néophytes d’entre nous, mais imaginez les possibilités qui vous sont ouvertes...


Les @mixin avec arguments

Il est possible de passer des arguments aux @mixin pour leur donner un peu plus de flexibilité et d’élégance.

/*Html*/
				
class="boite"
class="boite-2"
/*Sass*/

@mixin taille-boite($width, $height) {
width: $width;
height: $height;
}

.boite {
@include taille-boite(100px,100px);
}
.boite-2 {
@include taille-boite(200px,200px);
}

Avec ce principe de @mixin avec arguments, je pense que vous commencez à voir les possibilités, l’élégance et la maintenabilité de votre code. Continuez à vous entrainer jusqu’à ce que la manière d’écrire les @mixin soit naturelle, faîtes des @mixin pour faire de cercles et profiez-en pour préfixer votre border-radius... Que du bonheur.


Conclusion

Les @mixin et @mixin avec arguments sont très maniables et flexibles. Elles assurent une réactivité en production et une intelligibilité du code instantanée. Croyez-moi avec Sass vos collègues et collaborateurs vous remercieront.


Les héritages avec @extend

Créer son @extend et l’utiliser

Un @extend est une fonctionnalité d’héritage classes CSS. Il nous permet d’optimiser notre code. Il est possible de dire au Sass “Tous les ”appels” commençant par “%” ne seront pas compilées, mais pourront être utilisés. Ok, j’imagine que vous vous dîtes que je suis complètement crâmé (et vous n’avez pas tout à fait tord) mais vous allez tout de suite comprendre avec les exemples ci-dessous.

Exemple sans le “%”

/*Html*/
				
class="boite"
class="boite-2"
/*Sass*/

.bloctype {
width: 100px;
height: 100px;
float: right;
}

.boite {
@extend %bloctype;
background: pink;
}

.boite-2 {
@extend %bloctype;
background: red;
}
/*CSS une fois passée dans Koala*/

.bloctype, .boite, .boite-2 {
float: right;
width: 100px;
height: 100px;
}

.boite {
background: pink;
}

.boite-2 {
background: red;
}

Ici le compilateur comprend que .bloctype, .boite et .boite-2 héritent des même propriétés width, height et le float grâce à @extend bloctype, puis il ajoute à .boite et .boite-2 leurs couleurs. Notez que dans notre html .bloctype n’est pas utilisé ce qui, (dans ce cas là) fais un “appel css” sur .bloctype et donc allourdi notre code.

Exemple avec le “%”

/*Html*/
				
class="boite"
class="boite-2"
/*Sass*/

%bloctype {
width: 100px;
height: 100px;
float: right;
}

.boite {
@extend %bloctype;
background: pink;
}

.boite-2 {
@extend %bloctype;
background: red;
}
/*CSS une fois passée dans Koala*/

.boite, .boite-2 {
float: right;
width: 100px;
height: 100px;
}

.boite {
background: pink;
}

.boite-2 {
background: red;
}

Ici le compilateur comprend que %bloctype ne doit pas être compilé dans le .css et que .boite et .boite-2 héritent des même propriétés width, height et float toujours grâce à @extend %bloctype. Puis il ajoute à .boite et .boite-2 leurs couleurs respectives. Notez que dans notre html .bloctype n’est pas utilisé, il nous sert juste gabarit de boîte. Plutôt habile non ?

Conclusion

Les @mixin et @extend peuvent avoir des ressemblances, mais dans la majorité des cas, essayons de travailler avec les @extend qui sont moins lourds en poids que les @mixin. Gardons toujours à l’esprit qu’un code bien optimisé, c’est un site plus réactif et donc plus agréable pour l’utilisateur, mieux référencé, etc...


Les inclusions et les partielles

Le @import

La fonction @import de Sass est différente de celle nativement présente en CSS3. En CSS3 elle se contentait de faire appel à un autre fichier CSS et liait les deux, ce qui demandait au navigateur de charger d’autres fichiers css en cache et de ce fait rallentissait le visiteur. En Sass, @import ne se contente pas de lier deux fichiers, mais elle les fusionne en un fichier CSS unique (ici toujours style.css).


Quel intérêt direz vous ?

Côté Sass on peut structurer ses fichiers .scss comme on veut et ainsi maintenir un processus de travail logique et clair pour tout le monde. Côté navigateur, le code généré reste proppre et optimisé.

Schema_sass-css

Les _partielles (ou partials en anglais)

Pour utiliser ces inclusions, il y’a un nouveau concept tout simple qui est celui des partielles. Les partielles ne sont ni plus ni moins que des fichiers .scss commençant par un underscore _ (comme sur le schéma ci-dessus.

/*Sass (style.scss)*/

@import 'boites';
/*Sass (_boites.scss)*/

%bloctype {
width: 100px;
height: 100px;
float: right;
}

.boite {
@extend %bloctype;
background: pink;
}

.boite-2 {
@extend %bloctype;
background: red;
}
/*Sass (_boites.scss)*/

.boite, .boite-2 {
float: right;
width: 100px;
height: 100px;
}

.boite {
background: pink;
}

.boite-2 {
background: red;
}

J’ai repris le même exemple de boîtes que tout à l’heure pour que nous nous concentrions sur l’essentiel, les inclusions et partielles.

Ici donc, j’ai toujours mon style.scss dans lequel je dis “Importe-moi dans style.scss tout ce qu’il y’a dans _boites.scss. Remarquez qu’il n’est pas nécessaire de mettre le underscore _ lors de l’import.


Conclusion

Les @import et partielles forment un duo de choc et vous redonne une méthodologie de travail jusque là jamais atteinte en CSS. Vous pouvez créer autant de partielles que vous souhaitez, mais veillez à ne pas tomber dans le “trop de partielles tuent les partielles”. Petite précision tout de même, si vous utilisez l’instruction CSS3 @import url(), Sass liera la feuille de style comme en CSS pur.

Un petit point sur l’apprentissage

Si vous en êtes arrivé là sans problèmes particuliers c’est que vous comme moi avons fait du bon boulot, pour les autres, pas d’inquiétude, c’est tout à fait normal de ne pas comprendre sur le coup. Je vous invite donc à reprendre les points bloquants et à lire et relire cet article, prendre des notes, discuter avec d’autres pour échanger se faire expliquer les choses d’une autre manière et de vous documenter sur d’autres sites ou ouvrages.


La Sass a été créer par l’Homme pour l’Homme, aucune technologie extra-terrestre n’entre en compte, prenez votre temps et faîtes les chose dans l’ordre.