ManuDevil, Conception Multimédia - Internet et multimédia à votre image, à votre mesure. Pour un site dynamique, facile à mettre à jour, contactez-moi ! ManuDevil : conception multimédia dynamique


Téléphone 0966 862 640  Mobile 0615 668 502  Facebook  
Accueil du site > Les technologies > CSS et SASS

CSS et SASS

mardi 5 mai 2015, par ManuDevil, Conception Multimédia

Les CSS, ou Cascading Style Sheets, tout le monde connait. Mais qu’en est-il de SASS ?


Cascading Style Sheets

Depuis les années 2000, les CSS permettent aux webmasters de jouer sur l’aspect visuel de leur site, à peu de frais. Le principe est simple : en détachant sémantiquement le contenant du contenu, on peut utiliser un seul jeu de fichiers qui sera valable pour l’aspect de toutes les pages du site.

Pour chaque page, on aura en gros le code HTML qui gérera le contenu, le texte, les paragraphes, les titres... et l’aspect visuel sera géré par un ou plusieurs fichiers, appelés sur toutes les pages, qui expliqueront que les titres doivent avoir tel aspect, que le bloc de navigation doit avoir tel placement et telles dimensions, etc. En modifiant une seule fois la CSS, on joue sur tout le site, c’est extrêmement pratique.

Ces feuilles de styles sont dites « en cascade » parce qu’il y a un système d’héritage. Un exemple ? Prenons, dans le code HTML, un titre h3 qui a comme classe bleuSouligne. Dans le fichier CSS, mettons que nous ayons décidé que les titres h3 soit centrés, écrits en Arial de corps 16px. Mettons également que la classe .bleuSouligne écrive en bleu et en souligné. Eh bien un titre h3.bleuSouligne possédera alors toutes ces propriétés, du centrage au soulignement.

Les limitations

Les sites devenant de plus en plus complexes, les CSS le sont devenues également. De plus, avec la venue du responsive design [1] et des media queries [2], la quantité de lignes de codes à écrire s’est multiplié, rendant la lecture et la modification de ces CSS de plus en plus difficiles. En plus de cela, les fichiers comprenant de plus en plus de lignes, ils sont de plus en plus lourds... et donc de plus en plus longs à charger. L’une des solutions permettant de réduire le poids des fichiers CSS est de supprimer les espaces... ce qui rend la lecture et la modification encore plus ardue. Sans compter que la sémantique du code CSS est assez simple, et il est vite fait de se perdre dans la hiérarchie de parenté.

SASS ?

SASS est censé répondre à ces différents problèmes, et les résoudre. SASS signifie Syntactically Awesome StyleSheets, les feuilles de styles à la syntaxe formidable. Comment cela fonctionne-t-il ?

Preprocessing

À la base, un fichier SASS est un fichier texte, tout comme les fichiers CSS. Mais les navigateurs ne savent pas encore les lire tels quels. Il faut donc un moteur qui va les transformer en fichiers CSS avant la mise en ligne. Dans ce fichier, on a du code qui ressemble à du code CSS, avec des améliorations. Le preprocessing permet de compiler correctement le code, de prévenir en cas d’erreur, et aussi de compacter le fichier CSS envoyé sur le serveur. Le fichier source en SASS gagne énormément en lisibilité, et le fichier compilé en CSS gagne en poids et en fiabilité.

Des variables

En CSS, on est amené à répéter beaucoup d’éléments de code. Par exemple, une même couleur, base de la charte graphique, peut être utilisé à de multiples endroits. Si pour des raisons de mise à jour, on est amené à changer cette couleur, ça devient fastidieux. En SASS, on peut déterminer qu’une variable correspond à la couleur en question. Ensuite, au lieu d’utiliser cette couleur dans le code CSS, on utilise sa variable. Le gain de temps est indéniable, et le code en devient plus clair.

Imbrication

Afin de simplifier la lecture, on peut, en SASS, quand on a besoin d’apporter des précision à un style donné, encapsuler le code. Un exemple sera plus parlant. Voyez ce code SASS :

nav {
 ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 li { display: inline-block; }

 a {
   display: block;
   padding: 6px 12px;
   text-decoration: none;
 }
}

Voyez comme le style de ul est encapsulé à l’intérieur de celui de nav, tout comme celui de a est ici encapsulé dans celui de li. Voyons maintenant comment cela sera traduit en CSS par le préproceseur :

nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

nav li {
 display: inline-block;
}

nav a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
}

On a écrit moins de code en SASS, l’imbrication le rend plus clair et plus logique. Mais en CSS, cela fonctionne toujours.

Importer d’autres fichiers

Parfois, il faut plusieurs fichiers CSS pour faire tourner un site. Cela demande plusieurs requêtes, et cela est une source de ralentissement.

Avec SASS, il est possible de faire appel à plusieurs fichiers, qui seront tous compilés en un seul. Une seule requête, on gagne en temps.

Mixins

On a vu les variables, qui permettent de spécifier une propriété. Avec les mixins, on peut spécifier plusieurs variables d’un seul coup. Par exemple, si on veut créer plusieurs blocs, chacun avec une bordure grise arrondie, et une ombre portée, il suffira de regrouper ces caractéristiques dans un mixin, et d’insérer ce mixin dans le code des blocs dont on spécifiera alors les autres propriétés uniques.

Apprendre SASS

Il existe encore d’autres possibilités et propriétés, et nul doute que cela évoluera encore avec le temps. Mais SASS possède plusieurs avantages indéniables. Le plus dur reste d’apprendre CSS, le reste ira presque tout seul, par exemple en allant faire un tour sur le site officiel de ce langage.

Notes

[1]Design de site dont l’affichage s’adapte à la taille de l’écran. Parfait pour voir un site aussi bien sur un écran d’ordinateur que sur un écran de smartphone.

[2]Code CSS conditionnel qui permet de modifier des propriétés en fonction du support d’affichage. On peut ainsi avoir un aspect différent sur un écran ou une impression, sur un ordinateur de bureau ou un smartphone.

Popularité : 1 % - 1 visites par jour.


Haut de page
Qui suis-je ? | L'expérience du multimédia | Les technologies | Les services | Des utilitaires pour l'ordinateur | Contact
Suivre la vie du site RSS 2.0 | Plan du site | SPIP |