Se connecter Recherche

Vous connaissez forcement le CSS, ce langage de style qui vous permet de mettre en place le design de vos sites à coup de sélecteurs et de propriétés attribuées. Ce dernier est assez simple à prendre en main, du moins dans ses bases, et vous autorise une palette de créativité très large depuis sa version CSS3. Mais à une époque où les sites deviennent de plus en plus riches et complexes, ciblant un éventail toujours plus large d’appareils et de tailles d’écran (responsive web design), les limites de l’écriture en CSS peut vite rendre la création de ses feuilles de style complexe et lassante, ne devenant plus qu’une longue liste de règles compliqué à modifie

epica design

Heureusement, les développeurs Hampton Catlin et Nathan Weizenbaum ont proposé une meilleure façon de gérer des feuilles de style complexes en créant une nouvelle syntaxe permettant d’écrire et de gérer un CSS toujours plus avancé. Comment? En utilisant un préprocesseur (programme fonctionnant sur votre ordinateur ou sur un serveur) chargé de traduire cette nouvelle syntaxe intelligente dans le bon vieux CSS que nos navigateurs comprennent: le Syntactically Awesome Style Sheets, plus couramment nommé SASS.

Avantages du SASS

SASS utilise une syntaxe proche de CSS, appelée SCSS (“Sassy CSS”). Vous pourrez donc chaque fois que vous voyez un fichier avec l’extension .scss, en déduire que ce dernier contient des règles de style codé selon la syntaxe SASS.

Contrairement à CSS, le SCSS est un vrai langage de programmation, avec des expressions, des fonctions, des variables, une logique conditionnelle et des boucles. Sa force vient de la facilité avec laquelle il va vous permettre d’organiser vos feuilles de styles et autoriser des modifications globales en modifiant simplement une variable ou en ajoutant, par exemple, un parent à un élément spécifique qui sera répercuté dans l’ensemble de vos styles sans passer par une modification unitaire des éléments concernés.

Utiliser SASS pour vos projets

Sass est écrit en Ruby, et distribué via le package manager de Ruby, RubyGems. Pour pouvoir commencer à créer vos feuilles de style .scss et générer un fichier CSS final qui sera indispensable à une bonne compréhension de vos règles par l’ensemble des navigateurs web, vous devrez utiliser un compilateur SASS: je vous conseille COMPASS, qui est open-source, dont nous verrons la mise en place dans un article à venir.

Un point non sans importance est la coloration syntaxique du code scss. C’est un point sur lequel j’ai rencontrer quelques « problèmes » car celle-ci n’est pas native pour un certain nombre d’éditeurs de code. Le meilleur résultat que j’ai trouvé consiste à utiliser Notepad++ auquel vous viendrez ajouter un complément de coloration syntaxique spécifique à ce code. La démarche, très simple, est expliquée sur Marvinlabs ainsi qu’un lien qui vous permettra de télécharger les fichiers requis.

Quelques Frameworks utilisant SASS

ZURB FOUNDATION

epica design

Foundation est sans aucun doute le plus gros Framework front end Sass. J’ai personnellement choisi de le préférer à Bootstrap pour son package d’éléments très complet et sa conception plus apte à être personnalisée.

Il est important de noter la possibilité de faire un HTML sémantique, grâces a des mixins qui vont promouvoir vos classes aux rangs des rows et columns que l’on a l’habitude de voir.

Site de Foundation

BOOTSTRAP

epica design

Bootstrap, le plus connu des frameworks front-end. Fournit tout ce dont un intégrateur pourrait avoir besoin en matière de CSS, mais aussi de JS. Il a l’avantage d’être très soutenu par la communauté, ce qui explique son grand nombre de ressources.

Site de Bootstrap

GUMBY Framework

epica design

Un framework que j’ai découvert récemment et qui demande à être étudier.

Site de Gumby

SASS vous interesse! Découvrez dans un prochain article comment mettre en place votre premier projet.


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*