Une nouvelle version de Sass est de sortie ! Nom de code MAPTASTIC MAPLE, elle apporte comme grande nouveauté les "map", que les développeurs connaissent déjà sous le non tableau associatif, Hash, dictionary, '… . Ce nouveau type d'objet permet de créer des tableaux associant des clés à des valeurs, de cette manière.

$colors: (
  header: #b06,
  text: #334,
  footer: #666777,
)

 

Mais bon, voila : en quoi un nouveau type d'objet en Sass peut vous intéresser en tant qu'intégrateur, alors qu'il y a de grandes chances pour que vous n'utilisiez Sass que pour ses variables (si vous l'utilisez tout court). Le CSS est bien suffisant pour intégrer, et le Sass est plein de fonctionnalités compliquées.

Pour vous faire changer d'avis, je vous propose une petite série d'articles expliquant les fonctions complexes de Sass.

Sass en quelques mots

Sass est un préprocesseur CSS, c'est-à-dire un programme qui va lire certains langages (le scss et le sass) et produire du CSS. De cette manière, il est possible d'ajouter de nouvelles fonctionnalités au CSS sans avoir à attendre que les utilisateurs mettent à jour leurs navigateurs (qui eux reçoivent toujours du CSS standard).

Trouvez un webdesigner disponible

Trouvez gratuitement le prochain talent qui réalisera votre projet ou rejoindra votre équipe.

Pour plus d'informations, je vous conseil la lecture de CSS & SASS : Augmentez votre productivité dans vos intégrations

Les variables

Les variables sont la fonctionnalité la plus simple à utiliser de Sass. Les variables sont juste des "noms" données à certaines valeurs, et qui se comporte exactement comme se serait comporte la valeur.

Il est possible de créer des variables de cette manière :

$module-height: 20px;
$main-color: #777;

 

La variable $color, dans notre exemple, est une couleur, et peut donc être attribuée a une propriété background-color, par exemple. ce type de fonctionnement permet de n'écrire les valeurs de toute la palette de couleurs du site qu'a un seul endroit, et de pouvoir les changer très simplement par la suite, sans passer par une dangereuse phase de chercher/remplacer.

Ces variables peuvent aussi servir dans des conditions, que nous allons voir tout de suite.

Les conditions en Sass

Présentation générale

Les conditions en Sass sont les mêmes que les conditions en programmation standard : on limite l'exécution d'une ou plusieurs lignes au cas où une certaine condition est remplie. Dans le cas où la condition n'est pas remplie, il est possible de tester une autre condition, ou bien d'exécuter d'autres lignes.

Petit exemple tiré de faits réel :

SI ta chambre est rangée
  Tu peux aller jouer
SINON
  Tu range ta chambre

 

Leur utilisation permet de pouvoir s'adapter à différentes situations rapidement, sans avoir à modifier son code.

Les conditions sont là pour examiner des expressions, souvent mathématiques, comme des égalités ou des ingalités (plus grand que, plus petit que, …).

a == b : a est egale à b
a > b : a est plus grand que b
a < b : a est plus petit que b
a >= b : a est plus grand ou égal à b
a <= b : a est plus petit ou égal à b

 

Les conditions fonctionnent grossièrement toujours de cette manière quel que soit le langage de programmation, et comme nous allons le voir, Sass ne fait pas exception.

Fonctionnement

La présentation générale, c'est bien mais la syntaxe c'est mieux. La voilà, dans toute sa splendeur :

@if [condition] {
  // CSS si vrai
} @else {
  // CSS si faux
}

 

Ou [condition] est remplacée par une condition comme $width > 100, ou bien $ie == true. En fonction de la condition, le CSS qui s'écrira dans le fichier .css sera celui correspondant a CSS si vrai ou bien a CSS si faux.

Exemple

Selection automatique de la couleur de l'ombre d'un texte

Cet exemple permet de déterminer automatiquement la couleur à appliquer à l'ombre d'un texte. De cette manière, changer la couleur du texte changera automatiquement la couleur de son ombre.

#mon_id {
  $text-color: #444;
  $shadow-opacity
  // Si le texte est sombre, on met une ombre blanche
  @if lightness($text-color) < 50% {
    text-shadow: 1px 1px 1px rgba(#fff, $shadow-opacity);
  // Sinon, c'est que le texte est clair, et l'ombre donc noir
  } @else {
    text-shadow: 1px 1px 1px rgba(#000, $shadow-opacity);
  }
  // On applique la couleur au texte
  color: $text-color;
}

Et la suite ?

Les variables et conditions sont très importantes, mais ne peuvent tirer leur plein potentiel si elles sont seules, d'où le très faible nombre d'exemples.

Il reste donc encore deux points que je compte examiner avec vous, sur de prochains articles : les boucles, qui permettent d'accélérer les taches les plus répétitives, et les Mixins, permettant de tirer toute la puissance des variables, conditions et boucles pour créée un code le plus modulaire et le plus réutilisable possible.

À mardi prochain pour la prochaine étape : les boucles.