Les technologies évoluent de plus en plus, pas seulement avec l’arrivée du HTML5 et CSS3 mais dans nos process de développement. Notre métier de designer web est connu pour évoluer de jour en jour, où il faut s’adapter aux nouvelles tendances et aux différentes utilisations du web.
Aujourd’hui un tournant se fait dans les méthodes d’intégration au niveau du HTML et du CSS. Nous avons déjà parlé du Haml qui permet une simplification du code HTML. Désormais place à Sass (Syntactically Awesome StyleSheets) qui va révolutionner votre CSS !
Sass ne manque pas de style !
Sass est une extension de CSS3, ajoutant de nouvelles règles dans notre façon d’intégrer un web design. Les grandes nouveautés sont : les variables, les mixins, l’héritage de sélection et différents options très utiles.
Vous avez surement déjà entendu parler de LESS ou SCSS ces dernières semaines, Sass va plus loin dans la simplification du code. Sass est la suite logique du langage SCSS, qui permet de simplifier la syntaxe principale. Pour résumer vous en aurez fini avec les { } et ; qui nous exaspéraient, finit de voir nos mise en forme ne pas être prise en compte lorsque que nous oublions de fermer nos éléments ou nos lignes.
Les caractéristiques de Sass
Les variables :
Un outil précieux que connaissent déjà les développeurs, il permet de stocker n’importe quelles informations (couleur, taille, texte, etc.) dans un objet que l’on nomme $MonObjet :
Désormais il sera un jeu d’enfant de changer la couleur d’un site sans passer par tous les éléments du CSS, il suffira simplement de changer la valeur de votre variable. Sass supporte des variables ainsi que les opérations mathématiques de base et de nombreuses fonctions utiles à voir ici :
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
Les mixins :
Les mixins reste la meilleure avancée en terme d’innovation et vous permet de rendre votre travail encore plus efficace et plus rapide. Les mixins vont vous permettre de réutiliser des pans entiers de CSS, propriétés ou des sélecteurs. Vous pouvez même leur donner des arguments afin de créer des mises en forme complexes en utilisant seulement une seule ligne de code !
Surement l’un des exmples les plus parlant, si vous avez déjà réalisé des transitions en CSS3 le plus (ch****) embêtant est de réécrire à chaque fois tous les lignes pour chaque navigateurs. Désormais vous serez soulager car Sass le fait pour vous.
L’héritage :
Terminé le copier/coller Sass permet de dire à un sélecteur d’hériter de tous les styles d’un autre sans dupliquer les propriétés CSS. Toujours dans une simplicité et une facilité d’utilisation.
Quelques outils utiles :
Voici deux exemples de fonctionnalités qui se retrouvent très utiles dans un web design, ce sont les fonctions « darken » et « ligthen » qui permettent d’assombrir ou d’éclaircir une couleur à partir d’une variable, et c’est génial ! Démonstration :
Il existe bien plus d’outils qui pourront vous servir, qui sont à découvrir sur la documentation de Sass : SASS_REFERENCE.html ou dans nos prochains articles sur ce sujet.
Le fonctionnement et les contraintes de Sass
C’est bien beau tout ça, mais comment mettre en place Sass sur son site ? Puis que devienne nos belles feuilles de styles en .css ?
Pour commencer, vous pouvez utiliser Sass seulement sur la technologie de Ruby. Son installation est très simple et se trouve en haut du site http://sass-lang.com/
Si vous n’utilisez pas Ruby, il est temps de s’y mettre ! Notre développeur (Benjamin Sanchez) a débuté une liste d’articles pour vous présenter son fonctionnement. Sinon il vous reste toujours LESS.
Pour la question des feuilles de styles en .css, elles sont toujours présentes ! Ruby génére automatiquement le fichier .css à partir du fichier .sass, ce qui permet de ne rien changer pour les navigateurs qui utiliseront toujours les .css. Les css créés peuvent être normaux, en ligne, ou totalement compressés, c’est au choix.
Si vous n’utiliser pas Ruby, il est temps de s’y mettre ! Notre développeur (Benjamin Sanchez) a débuté une liste d’articles pour vous présenter son fonctionnement. Sinon il vous reste toujours LESS.
Pour la question des feuilles de styles en .css, elles sont toujours présentes ! Ruby génére automatiquement le fichier .css à partir du fichier .sass, ce qui permet de ne rien changer pour les navigateurs qui utiliseront toujours les .css. Les css créés peuvent être normaux, en ligne, ou totalement compressés, c’est au choix.
Sass a un framework disponible : COMPASS
Si vous souhaitez gagner davantage de temps, je vous conseille fortement l’utilisation de Compass qui regroupe une multitude d’outils et de mixins déjà programmés pour vous rendre le travail encore plus facile. A découvrir sur http://compass-style.org/
