Débuter avec SASS & SCSS

L’équipe Bootstrap a annoncé le 19 août dernier la disponibilité en version alpha de Bootstrap 4 sur son blog. Une des grosse nouveauté pour ce nouvel opus est la reconstruction du framework sur une base SASS (et non plus LESS). Découvrons ensemble ce qu’est SASS et comment débuter avec.   Découvrir SASS SASS est un […]

Posté le par Benoît Philibert|5327 vues

L’équipe Bootstrap a annoncé le 19 août dernier la disponibilité en version alpha de Bootstrap 4 sur son blog. Une des grosse nouveauté pour ce nouvel opus est la reconstruction du framework sur une base SASS (et non plus LESS). Découvrons ensemble ce qu’est SASS et comment débuter avec.

 

Découvrir SASS

SASS est un langage similaire à LESS. C’est à dire qu’il permet de rendre vos feuilles de styles CSS dynamiques par le biais de variables, « mixins » et autres fonctions qui lui sont propres. Ce dernier propose des alternatives à LESS et un style d’écriture différent. Nous vous avons déjà présenté LESS CSS sur Monbootstrap et il est bon de rappeler que Bootstrap a été construit avec, (jusqu’à la version 4) ce qui permet d’adapter directement si on le souhaite ses propres variables et modifications sur l’onglet « Customize » du site officiel.

 

Ecrire du SASS :

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
font: 100% $font-stack
color: $primary-color

On s’aperçoit assez rapidement que SASS n’utilise aucune ponctuation. Je l’avoue, il faut s’y habituer.

Les symboles $ représentent des variables. Après avoir définit une variable $font-stack et $primary-color, nous les appliquons à l’élément body pour automatiser leur résultat. De ce fait, nous pouvons utiliser autant de fois que souhaité la variable sur d’autres éléments.

 

Le langage SCSS

Le langage SCSS est similaire à SASS à 99%.

Le 1% s’applique très précisément à la ponctuation. En effet, nous venons de voir que SASS néglige de manière volontaire la ponctuation. Il est clair que ce n’est pas forcément « plus évident » à utiliser sur le moyen/long terme. Pour palier à ce manque de clarté, un ponctuation équivalente au CSS a été apportée avec SCSS. À présent, vous aurez l’impression de faire du CSS avec des variables dynamiques. Essayons :

 

Ecrire du SCSS :

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

Les variables restes sans ponctuations, cependant, le reste utilise une ponctuation CSS classique.

 

Commencer avec Bootstrap & SASS

 

L’installation

Bien entendu, pour débuter avec SASS (SCSS étant une manière de formater son code différemment mais le langage reste bien SASS) il vous faut installer SASS en local afin de pouvoir générer une feuille de style CSS compilée par le langage. Si vous souhaitez le faire manuellement, vous n’avez qu’à suivre les explications proposées sur le site officiel de SASS.

Pour les autres, je vous recommande fortement d’installer un compilateur. Le logiciel compilera automatiquement vos feuilles de styles SCSS à chaque sauvegarde de votre part. Je vous ai précédemment suggéré l’utilisation du logiciel CodeKit pour LESS. Ce dernier fonctionne pour bon nombre de langage dont SASS.

 

Importer une feuille de style dans une autre

SASS propose une solution efficace afin d’importer le contenu d’une feuille de style à l’intérieur d’une autre. L’autre gros intérêt est que vous pouvez très bien intégrer du CSS à l’intérieur d’une page SCSS.

Pour se faire, vous devez utiliser @import :

// base.sass

@import reset

body
font: 100% Helvetica, sans-serif
background-color: #efefef
// base.scss

@import 'reset';

body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

Dans cet exemple, on importe le fichier reset à l’intérieur de base.

 

Mixins

La Mixins est une technique différente de ce que l’on a l’habitude de voir. Le principe est de rendre une propriété « générique » afin d’en changer simplement sa valeur. Dans l’exemple ci-dessous, on définit la variable $radius au sein de la propriété CSS border-radius. Par la suite, nous pouvons réutiliser cette propriété générique à volonté en l’applicant avec une valeur aléatoire (en fonction de votre élément).

=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius:    $radius
-ms-border-radius:     $radius
border-radius:         $radius

.box
+border-radius(10px)
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

.box { @include border-radius(10px); }

Nous pouvons constater que la mise en forme SCSS est beaucoup plus simple à appréhender lorsque l’on a déjà l’habitude du CSS3. Enfin dans ce cas précis, l’intérêt est de générer automatiquement tout les préfixes CSS3 sans les répéter à chaque fois que vous utilisez la propriété border-radius.

 


Ces articles pourraient vous intéresser

Tags

1 commentaire

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.