Qu’est ce que Sass – Introduction et présentation
Article 8 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.
Présentation et états des lieux
Depuis l’apparition des feuilles de styles CSS, il a toujours été frustrant de ne pas pouvoir coder à la manière de certains autres langages tels que JavaScript ou PHP, (pour ne citer qu’eux), et donc, de rester cantonner à un langage de description de type propriétés / valeurs.
Bien que le w3c ait réfléchit à adopter certaines notions telle que les variables CSS, ou les notations fonctionnelles les recommandations et leur prise en compte par les navigateurs sont restées peu réactives.
C’est un peu en réponse à ces propositions peu nombreuses que sont entrés en scène diverses familles de préprocesseurs CSS, tels que, Sass, Less, Stylus, PostCSS, CSSNext, Closure Stylesheets, CSS Preprocessor ou encore Rework.
Le principe des préprocesseurs
Le principe du préprocesseur est simple, il s’agit d’écrire les feuilles de styles au travers d’une syntaxe plus proche d’un vrai langage de programmation, que d’un langage de description.
C’est-à-dire, en employant des variables, des directives qu’elles soient de condition, de boucles ou de contrôle, des fonctions, et parfois même en s’appuyant sur des structures propres à la programmation objet, comme l’héritage, l’encapsulation ou encore le polymorphisme.
Puis, la finalité est de pouvoir rapidement compiler tout cela, que cela soit coté serveur, ou coté client, en feuilles de styles CSS standard, qui seront directement interprétables par les navigateurs, et autres périphériques.
Cette approche apporte une grande souplesse de développement, mais aussi de déploiement, de maintenance et d’évolution. En fonction de notre environnement de production, nous pouvons opter pour tel, ou tel, préprocesseurs afin qu’il puisse répondre au mieux au contexte, et, à la situation.
En ce qui concerne le choix du préprocesseur, pour illustrer les articles qui vont suivre, et sans volonté d’ouvrir une quelconque polémique, nous opterons pour un des plus populaires et des plus puissants, Sass.
Cependant, et quel que soit votre choix, le principe d’utilisation que l’on va aborder, reste portable et devrait s’adapter à l’identique.
Sass vs Sass
On entend souvent parler de Sass, mais aussi de Sass ou encore de SCSS. Qu’en est-il ? et existe-t-il une différence entre ces trois diverses appellations ?
Alors, c’est très simple, d’une part lorsqu’on parle de Sass (pour Syntactically Awesome Stylesheets), nous parlons du langage en lui-même, et ce langage s’appuie sur deux syntaxes d’écriture qui sont respectivement Sass, plus proche de celle employée par ruby, et SCSS (Sassy CSS), qui elle est plus proche de l’écriture traditionnelle des CSS.
$couleur: #363
.uneclasse
color: $couleur
$couleur: #363;
.uneclasse {
color: $couleur;
}
.uneclasse {
color: #363;
}
Ensuite, cela n’est qu’une question de choix personnel, et aussi, de contexte d’utilisation… En clair, si on développe sous Ruby, avec rails, on optera plus facilement pour Sass, si par contre on travaille sur du web en traditionnel HTML/CSS, et qu’on reprend fréquemment des sites déjà existant on s’orientera alors plus facilement vers SCSS.
Bien que les deux puissent être employées conjointement dans un même projet, les deux syntaxes ne peuvent pas cohabiter au sein d’un même fichier, qui usera forcement d’une extension en *.scss, ou en *.sass.
Sass n’est pas seul, il peut s’étendre
L’environnement de travail, ainsi que les outils employés, vont forcément différer que l’on travaille en application PHP, par exemple sous Symphony, Laravel, Zend, Cake ou autres, ou dans un cadre plutôt orienté client, avec des approches purement HTML, JavaScript.
De manière générale, et quelques soit l’environnement de travail, nous pouvons ajouter un ensemble de compléments, appelés aussi bien extensions, que plugins ou encore librairies, et, qui vont venir étendre les capacités natives de Sass.
Parmi les plus populaires, vous trouvez Compass, Bourbon, Sprite factory, Breakpoint, Susy, CSS Sprite, Typesettings, Scut, Buttons, Saffron, Andy… mais en surfant, ou en googlant, sur le sujet, vous en trouverez bien d’autres.
Ces ajouts s’utilisent très simplement, généralement en les installant sous l’environnement de production, et, en les importants au sein du document principal utilisé par Sass.
@import "compass"; @import "susy"; @import "breakpoint";
Nous explorerons davantage, et démontrerons comment les installer et les utiliser, dans un prochain article.
