[Tutoriel] Utilisez toute la puissance du CSS Avec SASS

Posted on

Utilisez toute la puissance du CSS Avec SASS

Sass (Syntactically Awesome Stylesheets) est un métalangage de CSS. C’est un langage qui ajoute une notion de programmation par le biais de variables et de mixins (qui pourraient se rapprocher des fonctions). Sass offre notamment la possibilité de créer des boucles, ou des conditions. Cela permet d’écrire des feuilles de style plus légères et modulaires. Les fichiers “.scss” ou “.sass” sont générés en feuilles de style CSS, compatibles avec les navigateurs.

Il existe deux syntaxes différentes pour Sass :

la syntaxe SCSS se veut proche de celle du CSS, rajoutant principalement l’imbrication des blocs. Les fichiers portent l’extension “.scss”.
la syntaxe SASS se veut plus épurée, en retirant les accolades et les point-virgules. Les fichiers portent l’extension “.sass”.
Comment utiliser Sass dans vos projets ?
Installation
Afin de pouvoir installer Sass sur votre machine, votre ordinateur doit avoir un environnement Ruby déjà installé (toutes les informations sur le site de ruby ).

Une fois cet environnement installé, tapez la commande suivante dans votre terminal :

gem install sass

Une fois Sass installé sur votre machine, afin de créer des feuilles de style CSS interprétables par le navigateur il faut compiler vos fichiers Sass.

Dans votre terminal, afin de compiler un fichier vous devez utiliser la commande suivante :

sass nomDuFichierSass.scss nomDuFichierCompiléCss.css

C’est vous qui choisissez le nom de votre fichier après compilation, exemple :

sass input.scss output.css

Si vous ne souhaitez pas relancer cette commande à chaque modification de votre fichier, il existe une commande qui surveille votre fichier pour le recompiler automatiquement :

sass –watch input.scss:output.css

Enfin si vous souhaitez compiler plusieurs feuilles de style Sass comprises dans un dossier, vous devez utiliser cette commande :

sass –watch chemin/Vers/Dossier/Feuilles/Sass:chemin/Vers/Dossier/Feuilles/Compilés/Css

Exemple :

sass –watch app/sass:public/stylesheets

Vous pouvez aussi consulter la documentation sur le site de Sass.

Quelles sont les grandes révolutions de Sass ?

Les variables
Sass permet de créer des variables afin de stocker des valeurs, et les réutiliser dans plusieurs feuilles de style. De plus, les variables permettent de modifier facilement le style d’un site.

Grâce aux variables, les intégrateurs peuvent coder plus rapidement et la modification de couleurs, de tailles et autres devient un jeu d’enfant.

Déclarer une variable :

// Déclarer la couleur noire (#000) dans la variable $black
$black: #000;
Utiliser une variable :

nav {
background-color : $black;
}
Si, finalement, vous souhaitez que les éléments avec la variable $black n’ait plus comme couleur #000 mais #333, il suffit de modifier la valeur de la variable $black dans un seul fichier.

Le conseil Nolimit NT : Créer un fichier _vars.scss séparé contenant toutes vos variables et l’inclure dans les autres fichiers grâce à la ligne de code :

@import “vars”;

Créer un mixin (fonction) :
Les mixins permettent de créer des morceaux de codes CSS réutilisables dans différents fichiers par le biais d’une ligne de code.

Création d’un mixin :

Dans un fichier _mixins.scss vous pouvez déclarer toutes vos fonctions. Ici, nous vous donnons l’exemple de la création d’un mixin afin d’utiliser les règles media-queries facilement. Les règles media-queries vous permettent notamment d’adapter votre style en fonction des tailles d’écran (desktop, tablette, mobile).

// Déclaration d’une variable afin de déterminer une valeur max
$xs-screen: 480px !default;
// Création d’un mixin déclarant une media-query pour les appareils avec pour largeur maximale 479px
@mixin mobile-only {
@media only screen and (max-width: $xs-screen – 1) {
@content
}
}
Dans votre fichier Sass, vous pouvez utiliser ce mixin comme ceci :

@include mobile-only {
// vos règles Sass pour les écrans de taille mobile
}
Quelles sont les différences entre CSS et Sass ?
// Syntaxe CSS
nav li a {
color : #000;
background-color : #eee;
}
nav li a:hover {
color : #eee;
background-color : #000;
}
// Syntaxe SCSS
$black : #000;
$grey : #eee;
nav li a {
color : $black;
background-color : $grey;
&:hover {
color : $grey;
background-color : $black;
}
}
Dans cet exemple, vous pouvez remarquer toute la puissance de Sass, grâce à celui-ci nous évitons la répétition de code (ici nav li a n’est pas répété deux fois contrairement au CSS)

Mais cela ne s’arrête pas là, et c’est maintenant que vous allez découvrir la véritable révolution de Sass.

Compass, un framework Sass
Compass est un framework Sass apportant de nombreux mixins qui vous permettrons d’accroitre votre productivité et de réduire le temps d’écriture du code.

// Syntaxe CSS
nav li a {
-moz-transition: width .5s;
-o-transition: width .5s;
-webkit-transition: width .5s;
transition: width .5s;
}
// Syntaxe SCSS
@import “compass/css3/transition” // importation du mixin transition
nav li a {
@include transition(width .5s);
}
Cet exemple révèle toute la puissance de Sass, en une ligne vous obtenez le même résultat qu’en 5, c’est magique !