Comprendre et utiliser Sass
Article 9 sur 9 de la série: Comprendre et utiliser Sass
- Paramétrer Sass avec Compass
Bien que la librairie Compass ne soit plus maintenue, nous allons explorer une approche qui l’utilise et nous permet de continuer à en profiter sans compromettre nos productions.
- Travailler sa maquette avec Sass et Susy
Afin de mieux comprendre la mise en œuvre de tout ce que nous avons vu jusqu’à présent, y compris l’utilisation de Sass, nous allons déployer un véritable flux de travail en s’appuyant sur la mise en place d’un site.
- Premiers pas et premiers fichiers Sass
Après avoir vu tous ces concepts qui gravitent autour de Sass, il est important de mettre à plat et d’établir nos premiers fichiers et nos premières lignes de code afin de mettre tout cela en activité.
- Comment répartir ses fichiers partials sous Sass
SassScript va bien au-delà de l’utilisation simple de variables ou de mixin, nous allons explorer la mise en place d’un modèle assez complet pour concevoir notre développement de site ou d’application.
- Déployer Sass de manière efficace
Depuis la démocratisation et l’utilisation des préprocesseurs, différents concepts, principalement basés sur la programmation orientée objet, ont émergés et nous permettent d’aborder Sass d’une manière très modulaire.
- Installer et préparer Sass pour la production
Travailler sous Ruby nous apporte une véritable panoplie d’outils que nous avons sous la souris. Voyons comment installer ces différentes facettes qui peuvent nous être très utiles.
- Sass – La compilation et les outils disponibles
Bien que Ruby soit une approche très ouverte et évolutive, il existe différentes façons de compiler Sass dans CSS, et chaune peut présenter ses intérêts et ses avantages.
- Qu’est ce que Sass – Introduction et présentation
Qu’est-ce qu’un préprocesseur et ce qu’est Sass? Cet article présente les concepts de base et définis ce qu’on peut attendre d’une telle technologie.
- Comprendre et utiliser Sass
Cette série ne couvre pas la syntaxe de Sass, mais examine comment utiliser Sass et des concepts qui nous permettent d’exploiter au mieux les possibilités offertes par Sass.
Cette série d’articles sur Sass a pour objectif de permettre de prendre en main Sass et son utilisation. Il ne sera abordé que méthodologie et mise en place, et un concept d’approche se dégagera au fil des articles.
Si vous souhaitez débuter dans la syntaxe de Sass, il est fortement conseillé de se rapprocher de certains articles en ligne afin d’en comprendre et de prendre en main les bases de la syntaxe d’écriture. N’hésitez pas à explorer les exemples fournis par les sites officiels comme les liens qui suivent, vous y apprendrez beaucoup ;
Aller plus loin
En complément, vous trouverez sur le web pléthore de sites permettant d’aller encore plus loin et de compléter vos librairies :
À qui s’adresse cette série d’articles et de quoi s’agit-il ?
Cette série ne couvrira pas la syntaxe de Sass, mais examine comment utiliser Sass et aborde certains concepts qui nous permettent d’exploiter au mieux les possibilités offertes par Sass.
Bien que vous puissiez être débutant dans ce domaine, il est préférable de ne pas avoir peur d’utiliser du code, il est également souhaitable de comprendre les principes et les relations entre les règles des CSS et comprendre la logique orientée objet peut être un plus.
Que vous travailliez sous Mac ou sur Windows, que vous développiez pour des smartphones ou des écrans de bureau, que vous développez des sites Web ou des applications, que votre cible soit des navigateurs avancés ou plus anciens … dès que vous allez utiliser CSS, Sass sera là, à votre côté pour vous aider à améliorer considérablement votre flux de travail et votre processus de maintenance.
Si vous avez entendu parler de cette série à partir d’un forum de Dreamweaver
Soyez conscient que vous ne trouverez pas ici une similarité d’utilisation qui peut être comparée à l’aspect WYSIWYG de Dreamweaver, et encore moins de Muse. Au contraire, nous utiliserons des lignes de code et même des lignes de commande.
Alors, pourquoi cette série, car la nouvelle version de Dreamweaver intègre Sass et il s’agit juste d’une case à cocher pour la mettre en activité ?
Tout simplement, car afin de pouvoir profiter pleinement des capacités de Sass, il est parfois important d’ouvrir le capot et de comprendre en mode avancé comment et pourquoi cette technologie peut améliorer concrètement notre approche et l’utilisation de CSS.
Revenons à notre série d’articles sur Sass
De ce fait, au cour des articles qui suivent, il n’est pas nécessaire de reprendre les bases de la syntaxe, mais bien au contraire d’en extraire un principe d’utilisation et d’en dégager des concepts permettant d’exploiter Sass au mieux des possibilités qu’il nous offre.
Donc, pour commencer, voici le sommaire des articles qui vont suivre :
- Qu’est-ce que Sass ? Introduction et présentation
- La compilation et les outils disponibles
- Installer et préparer Sass pour la production
- Paramétrer Sass avec Compass
- Déployer Sass de manière efficace
- Comment répartir ses fichiers partials
- Premiers pas et premiers fichiers
- Travailler sa maquette
Aller plus loin
Sass and Compass in Action
Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis
Sass and Compass in Action is the definitive guide to stylesheet authoring using these two revolutionary tools. Written for both designers and developers, this book demonstrates the power of both Sass and Compass through a series of examples that address common pain points associated with traditional stylesheet authoring. The book begins with simple topics such as CSS resets and moves on to more involved topics such as grid frameworks and CSS3 vendor implementation differences....
