Vous avez peut-être entendu parler du prétraitement de CSS et vous vous demandez quel est le sujet du buzz. Vous avez peut-être même entendu parler de Toupet ou MOINS .

En bref, le prétraitement de votre CSS vous permet d'écrire des feuilles de style plus concises, formatées correctement et nécessitant des techniques moins répétitives lors de l'écriture de code CSS. Le résultat est un style plus dynamique et un gain de temps considérable lors du développement de sites Web ou d'applications.

Si vous écrivez déjà CSS, vous pouvez facilement apprendre à prétraiter votre CSS. Une fois que vous aurez compris la portée de Sass, vous vous demanderez pourquoi vous n’avez pas changé plus tôt.

En quoi Sass est-il différent de CSS?

Sass ressemble à CSS mais présente des différences évidentes une fois que vous plongez. Il y a deux façons d'écrire Sass et c'est à vous de décider quel style vous préférez. J'utilise le style en retrait et entre crochets (.scss) dans mes projets car j'aime vraiment visualiser où un bloc se termine et commence quand beaucoup de code est imbriqué. Une fois traité, le code Sass compile automatiquement vers un fichier CSS traditionnel en utilisant un moteur de prétraitement.

Il existe de nombreuses applications disponibles qui permettent de précompiler votre Sass de manière transparente et facile. Pour l'installer, vous pouvez utiliser la ligne de commande tant que vous avez installé Ruby sur votre machine. Si vous n'êtes pas à l'aise avec la ligne de commande, il existe d'autres options (plus d'informations à ce sujet ci-dessous) et si cela vous dépasse, visitez Sass-lang.com pour apprendre à le faire dans un format simple et détaillé. En fin de compte, en utilisant n'importe quelle méthode, que ce soit une ligne de commande ou une application, l’installation de Sass surveillera vos modifications et les compilera automatiquement au format CSS traditionnel.

Je recommande fortement d'utiliser des applications telles que Kit de code , LiveReload , ou Mélange qui vous aide à configurer un projet Sass sur un Mac à partir de zéro ou si vous êtes un utilisateur Windows PrePros . Codekit, mon choix de préprocesseur, m'aide en pré-traitant mon Sass et en validant et en minifiant votre code pour permettre à votre site de s'exécuter rapidement et efficacement. (La capacité de créer Boussole ou Bourbon Les projets basés sur Codekit sont également une fonctionnalité géniale mais dépassent la portée de cet article.) Après vous être familiarisé avec Sass, assurez-vous de bien utiliser Compass et Bourbon dans vos projets Sass.

Alors, qu'est-ce que Sass?

Sass signifie Syntactically Awesome Stylesheets et a été créé par Hampton Catlin . Sass introduit de nouveaux concepts comme les variables, les mixins et l'imbrication dans le code CSS que vous connaissez déjà et que vous aimez. Ces concepts rendent finalement votre CSS génial, plus facile à écrire et plus dynamique. Toutes ces fonctionnalités combinées accélèrent le flux de travail de tout concepteur ou développeur.

Ce qui confond généralement les gens, ce sont les manières alternatives d'écrire Sass. Vous verrez d'autres tutoriels ou explications de Sass en utilisant l'extension .SCSS ou l'extension .Sass pour leurs fichiers Sass. Cela est évident car il existe deux manières d’écrire le code qui produisent la même sortie. Le plus commun que j'ai vu, et la méthode que j'utilise actuellement est la version entre parenthèses connue sous le nom de .SCSS. Une autre méthode est l'extension .Sass qui repose davantage sur l'indentation que sur des éléments ponctuels et dépend des espaces blancs. Avec cette syntaxe, vous n'avez pas besoin de points-virgules ou de crochets comme vous le voyez dans CSS et la syntaxe .SCSS.

Consultez l'exemple ci-dessous.

.CSS

#container {width:960px;margin:0 auto;}#container p {color: black;}

.SCSS

/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}

.Toupet

/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$black

Structure

Bon, maintenant vous vous demandez probablement comment installer Sass pour vos propres projets. Le processus est assez simple, surtout si vous utilisez Codekit ou une application similaire pour vous aider.

Une structure de fichier typique d'un projet Sass ressemble au schéma ci-dessous. Cela peut paraître décourageant, mais je vous promets que votre flux de travail s'améliorera une fois que vous aurez compris comment les choses fonctionnent ensemble. En fin de compte, tout votre Sass est compilé dans un fichier CSS qui sera le fichier que vous incluez dans vos documents de travail, que ce soit HTML, PHP, etc.

stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.

Comment vous définissez votre structure dépend en fin de compte de vous. Commencez par une structure de base et adaptez vos besoins et vos flux de travail.

@Importer

Sass étend la règle CSS @import pour lui permettre d'importer des fichiers Sass et SCSS. Tous les fichiers importés sont fusionnés en un seul fichier CSS généré. De plus, toutes les variables ou mixins définis dans les fichiers importés sont transférés dans le fichier principal, ce qui signifie que vous pouvez virtuellement mélanger et faire correspondre tout fichier et vous assurer que tous vos styles resteront au niveau mondial.

@import prend un nom de fichier à importer. En dernier recours, les fichiers Sass ou SCSS seront importés via le nom de fichier de votre choix. S'il n'y a pas d'extension, Sass essaiera de trouver un fichier portant ce nom et l'extension .scss ou .Sass et de l'importer.

Si vous avez une configuration de projet Sass typique, vous remarquerez certaines règles @import dans un fichier de base. Cela vous permet simplement d'avoir plusieurs fichiers qui se synchronisent efficacement une fois compilés, par exemple:

@import "main.scss";

ou:

@import "main";@Partials

Si vous souhaitez importer un fichier SCSS ou Sass sans le compiler en CSS, vous pouvez ajouter un trait de soulignement au début du nom de fichier, également appelé Partial. Lors de la compilation du code, Sass ignorera les partiels lors du traitement en CSS. Par exemple, vous pourriez avoir _buttons.scss, aucun fichier _buttons.css ne serait créé et vous pouvez ensuite importer des "boutons";

La meilleure pratique consiste à créer un répertoire partiel et à y placer tous vos fichiers Sass partiels. En faisant cela, vous ne disposerez d'aucun nom de fichier dupliqué que Sass ne permettra pas, par exemple, le fichier partiel _buttons.scss et le fichier buttons.scss ne peuvent pas exister dans le même répertoire. L'utilisation des partiels est un excellent moyen de rester organisé au niveau mondial. Tant que vous importez le fichier, le Sass que vous écrivez est utilisable tout au long du projet. Généralement, à l'intérieur des partiels, je crée des mixins ou des variables à utiliser tout au long de mon projet. Je les nomme en fonction de leur contenu et des éléments qu'ils stylisent.

Variables

Les variables CSS sont une avancée majeure dans le développement Web moderne. Avec Sass, vous pouvez créer des variables pour des éléments tels que les polices, les couleurs, les tailles, les marges, le remplissage, etc. La liste est sans fin. Si vous écrivez JavaScript ou PHP, le concept est assez similaire en termes de définition des variables et des conventions.

Alors, pourquoi utiliser des variables? Les variables simples vous permettent d'utiliser un élément plus d'une fois, similaire à une classe en HTML ou une variable en JavaScript. Par exemple, disons que vous définissez plusieurs div avec une couleur de fond spécifique. Vous pouvez utiliser la variable qui est plus facile à retenir au lieu du code hexadécimal ou du calcul RVB traditionnel. Créer une variable avec un nom facile à retenir permet de réduire le copier-coller et d’améliorer le flux de production. Le même concept s'applique chaque fois qu'une variable peut être implémentée, et avec Sass qui est virtuellement n'importe où, par exemple ce .scss:

#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}

résultera dans ce fichier .css:

#container {font-size: 12px;padding: 10px;color: #C0392B;}

Opérations et fonctions

La partie intéressante des variables est qu'elles sont extrêmement similaires à celles utilisées dans les langages de script. Les variables dans Sass peuvent être utilisées à la fois dans les opérations et les fonctions. Les opérations mathématiques standard (+, -, *, / et%) sont prises en charge pour les nombres. Pour les couleurs, des fonctions intégrées à Sass ciblent la légèreté, la teinte, la saturation, etc.

Cette fonctionnalité rend votre code plus dynamique que jamais. Par exemple, si vous souhaitez modifier la couleur de lien globale de votre site, vous pouvez simplement modifier la variable, recompiler et votre site sera mis à jour de manière dynamique. Consultez un autre exemple ci-dessous pour une liste de navigation réutilisable, ce .scss:

nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);}  }} 

entraînera ce .css:

nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}

Nidification

La nidification est une raison majeure pour laquelle j'aime Sass. Vous écrivez moins de lignes de code à la fin et tout votre code est facile à lire en raison du formatage imbriqué. (Le même concept de nidification se trouve également dans LESS.)

Il existe deux types d’imbrication:

Sélecteur de nidification

Le sélecteur d’imbrication dans Sass est similaire à l’imbrication de HTML:

Main Content
Sidebar Content

La version Sass de l'imbrication:

#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}

entraînerait le CSS suivant:

#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}

Propriété nidification

Le deuxième type d'imbrication est l'imbrication de propriété. Vous pouvez imbriquer des propriétés avec le même préfixe pour mieux cibler les éléments, ce qui se traduit par moins de lignes de code, par exemple:

#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}

aboutirait à ce CSS:

#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}

Mixins

De toutes les fonctionnalités de Sass, les mixins doivent être les plus puissants. Les mixins sont similaires à une variable mais aux stéroïdes. Vous pouvez définir un style complet d'un élément et réutiliser ces styles tout au long de votre projet.

Les mixins sont définis à l'aide de la directive @mixin , qui prend un bloc de styles que vous avez créé auparavant et l'applique au sélecteur de votre choix à l'aide de la directive @include . Vous trouverez ci-dessous un modèle CSS commun utilisé pour créer un menu de navigation horizontal. Au lieu d'écrire le même code pour chaque instance de navigation, utilisez simplement un mixin et incluez-le plus tard si nécessaire. Ce concept peut être fait pour tout ce que vous utilisez encore et encore, comme les boutons, la typographie, les dégradés, etc.

/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}

Et ici nous incluons le mixin avec une ligne de code:

ul.navbar {@include navigate;}

ce qui se traduit par ce CSS compilé:

ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}

Vous pouvez même aller jusqu'à créer des mixins personnalisables qui utilisent des arguments pour mettre à jour dynamiquement. En plus de cela, vous pouvez inclure des mixins dans d'autres mixins ou créer des fonctions utilisant des mixins et plus. Le pouvoir derrière tout cela est absolument énorme.

Il y a quelques collections de mixin prédéfinies populaires dans lesquelles j'ai mentionné précédemment appelé Compass et Bourbon. Avec un simple @import dans votre projet, vous pouvez accéder aux mixins déjà générés couramment utilisés sur le Web. Il y a tellement d'options qu'il est difficile de couvrir tout ce qui est disponible, mais c'est vraiment amusant d'expérimenter et de mettre la main à la pâte en développant des animations ou des transitions personnalisées avec quelques lignes de code plutôt qu'un écran plein. Les mixins facilitent le développement entre navigateurs si vous n'avez pas envie de taper encore et encore des préfixes définis par le navigateur dans votre CSS.

Par exemple, nous créons ici un mixin avec des arguments lui permettant d'être personnalisé.

@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }

ce qui nous donne ce CSS quand il est compilé:

p {border-color: blue;border-width: lin;border-style: dashed;}

Résumé

Bien que Sass ait une courbe d'apprentissage, je crois sincèrement qu'une fois que vous aurez compris les méthodes et la syntaxe, vous ne voudrez plus jamais revenir à l'écriture de CSS standard.

Sass est extrêmement puissant et je n'ai couvert que les bases ici. Avec le CSS traditionnel, nous avons tous rencontré le copier-coller ou la recherche et le remplacement des tâches qui gaspillent beaucoup de temps dans la phase de développement de votre projet. Essayez Sass et découvrez comment créer un workflow efficace dans vos projets futurs.

Utilisez-vous Sass ou privilégiez-vous un autre préprocesseur CSS? Avez-vous un mixin préféré? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, utilise l' image zéro pour héros via Shutterstock.