Sass

Sass, ce langage permettant une grosse évolution du CSS par l’ajout de variables, de fonctions, d’héritages… se montre de plus en plus dans le monde du web.

Cet article sera évolutif et traitera principalement des parties magiques de Sass (la documentation étant déjà très complète).

Pour la petite histoire

Sass est un préprocesseur CSS, c’est à dire qu’il transforme un langage en l’étendant, pour générer du code CSS final.

Il existe deux familles de pré-processeur CSS :

  • Less
  • Sass : SCSS (principalement utilisé), SASS (utilisé surtout dans le monde Ruby)

Voyons rapidement deux bouts de codes :

body
background-color: #FEFEFE
color: invert(#FEFEFE)
body {
background-color: #FEFEFE;
color: invert(#FEFEFE);
}

La différence majeure, se joue principalement sur la syntaxe, le SCSS a une ressemblance plus proche au CSS alors que Sass se permet d’enlever les ; et les accolades.

La magie de Sass

L’interpolation avec Bootstrap

N’étant pas designer, j’utilise souvent Bootstrap (et Foundation).

Bootstrap utilise le Less alors que Foundation préfère le Sass. Néanmoins, un repo Github permet la portabilité de Bootstrap vers Sass.

Pour les points suivants, importez bootstrap-sass en gem ou sur Compass.

Créer des boutons flats

Avec une période où les 3/4 des sites tentent de faire du flat design, je suis parti à la recherche d’un type de boutons de ce style.

L’idée est de garder le border-color initial, de passer le background-color au transparent, le color au background-color initial et, lors du hover, repasser le background-color à sa valeur initiale.

Je me suis donc créé une classe btn-inverse qui pourrait fonctionner directement en la couplant à la class btn standard de Bootstrap.

.btn-inverse
background-color: transparent

&.btn-primary
color: darken($brand-primary, 5%)

&:hover
color: $btn-primary-color

&.btn-success
color: darken($brand-success, 5%)

&:hover
color: $btn-success-color

Expliquons :

Bootstrap possède des couleurs par défaut représentées sous ces variables $brand-primary, $brand-success, $brand-warning, etc... Il suffit donc de les reprendre afin de garder un thème uniforme.

Passons à deux syntaxes qui peuvent vous paraître étrange :

  • Le “nested” : imbriquer des classes afin d’hériter de leur comportement
  • Le & : reprend le nom de classe parent

Ainsi, si une div possède les classes btn, btn-primary et btn-inverse votre bouton sera plutôt (swag) élégant.

Créer des classes dynamiques de couleurs (avancé)

Un autre point sur lequel je m’embêtait souvent, est le nom de classes associés à des couleurs (background-color et color) afin de rester le plus généraliste possible.

Sass fourni en plus des fonctions, du nested, etc… un système de boucles (while, for, each).

L’idée est de créer des variables de couleurs, de boucler sur chacune d’elle en reprenant la valeur associé ainsi que le nom. De plus, créons une liste de ces variables.

$green:  #1abc9c
$blue: #3498db
$orange: #f39c12

$colors: green, blue, orange

La théorie

Nous pourrions très bien faire quelque chose de ce genre :

@each $color in $colors
.#{$color}
background-color: $color

En effet, une classe se nommant green pourrait avoir une propriété background-color: #1abc9c car, comme en Ruby, #{} permet l'interpolation de variables.

Or, dans une boucle, Sass n’est pas capable de gérer cette mise en pratique (il s’agit d’une de ces limites).

La pratique

Il est donc possible de gérer ce cas en créant une liste de tableaux, l’un important le nom, l’autre la valeur.

Mettons à jour notre liste $colors :

$colors: green $green, blue $blue, orange $orange
Pour sélectionner une valeur dans un tableau, nth(array, 2) selectionnera le deuxième item du tableau
@each $color in $colors
.#{nth($color, 1)}
background-color: nth($color, 2)

Amélioration des classes

Il est parfaitement possible d’améliorer ces classes, par exemple en détectant l’obscurité du background-color afin de gérer la couleur du texte.

De plus, pourquoi ne pas générer à la volée des classes type text-blue afin de gérer la couleur du texte, sans pour autant modifier le background-color.

@each $color in $colors
.#{nth($color, 1)}
background-color: nth($color, 2)

@if lightness(nth($color, 2)) > 80%
color: #333
@else
color: #FEFEFE

.text-#{nth($color, 1)}
color: nth($color, 2)