• A la une
  • Catégories
  • Dossiers
  • +

CSS & SASS : Augmentez votre productivité dans vos intégrations

par Vincent Ginetle 10/11/2011

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-lang

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 :

sass variables

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 !

sass-lang

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.

sass-lang heritage

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/.

sass-lang

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/.

compass with Sass

Sass & Compass: The future of stylesheets now.

Découvrez un slideshow sortie hier qui résume bien l'ensemble de Sass et Compass.

 

Des questions ou des commentaires ?

N'hésitez pas à nous poser vos questions sur cette nouvelles manière d'intégrer des webdesign. Nous avons mise en place ce principe pour notre agence web Dezup et cela nous permet de gagner en productivité et en temps d'intégration. Donc n'hésitez pas à faire l'essai vous aussi que ça soit avec Sass, Scss ou LESS.

 

 

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Vincent voir son blog

Passionné par le Web, les Arts Graphiques et les installations numériques, je travaille actuellement dans l'agence Dezup que nous avons créé avec l'équipe du BlogDuWebdesign.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir