Table des matièresSASS

 SASS, est l'acronyme de “Syntactically Awesome Style Sheets” ce qui ne définit que assez peu ce qu'est SASS.

A l'origine de SASS

Hampton Catlin et Nathan Weizenbaum sont les concepteurs de cette syntaxe de feuilles de style permettant d’écrire et de gérer un CSS toujours plus complexe

Entrons dans le vif du Sujet

I De SCSS à CSS

Un préprocesseur (en clair, un programme qui fonctionne sur votre ordinateur ou sur un serveur) sera chargé de traduire cette nouvelle syntaxe intelligente SCSS dans le bon vieux CSS que nos navigateurs comprennent.

II Oùtrouver le préprocesseur SASS

1ère méthode

Par le compilateur en ligne : http://www.sassmeister.com/

2ème méthode : Installation de ruby et du préprocesseur SASS, automatisation du lancement du préprocesseur

Nous allons écrire du SCSS et les navigateurs n'exploitent que du CSS. Nous pouvons installer et configurer le préprocesseur afin que chaque sauvegarde de notre SCSS, le préprocesseur la détecte et relance automatiquement sa compilation.

L'installation et la configuration sont très bien décrite dans la page
https://medium.com/@ricardozea/sass-for-beginners-the-friendliest-guide-about-how-to-install-use-sass-on-windows-22ff4a32c1f

(sauvegarde papier)

C'est à vous de le suivre : installer et configurer jusqu'à la demo proposée.

L'installation et le mode d'emploi de Sass est aussi décrit su r la page de référence :

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Résumé, à retenir pour vous (Ruby étant déjà installé par le responsable de la salle) :

Installer Sass à l'aide de la commande suivante, sous la fenêtre de commande(cmd) :
gem install sass
Pour compiler un fichier scss, placez-vous dans le dossier le contenant sous cmd, puis lancer la commande correspondante
sass input.scss output.css
Une deuxième méthode que nous emploierons et de créer dans votre dossier de travail, deux sous-dossiers sccs et css. Puis de lancer la commande suivante :
sass --watch scss:css
toute modification d'un fichier scss dans le dossier scss entrainera sa compilation qui sera placé dans le dossier css

III Sass Source Maps + Chrome = Magic

https://robots.thoughtbot.com/sass-source-maps-chrome-magic

L'éditeur de chrome permet d'éditer le fichier SCSS associé au CSS de la page à l'écran. L'enregistrement du SCSS déclenchera automatiquement sa compilation en CSS et le rechargement de celle-ci. Il suffit pour ce faire de modifier 2 paramètres de chrome :

1) cocher l'option "enable souces maps" avec "autoreload" comme ci-contre

2) Déclarer votre dossier de travail comme "workspace" en le pointant comme ci-contre

IV Tout SASS

La documentation de référence http://sass-lang.com/documentation/file.SASS_REFERENCE.html fourni toute les syntaxes et les usages de SASS. Nous allons en illustrer quelques unes, les autres seront déduites des exercices.

V Extension CSS

Les exemples ci-dessous sont repris de la documentation de référence citée ci-dessus :

1 - Règles imbriquées

SCSS permet de placer des sélecteurs à l'intérieur d'une règle : les propriétés s'adressent alors à l'enchassement des sélecteurs

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

est compilé en

#main p {
  color: #00ff00;
  width: 97%; }

#main p .redbox {
    background-color: #ff0000;
    color: #000000; }

On peut ainsi éviter de répéter les sélecteurs, ce qui simplifie les feuilles de style complexes.

2 - Référence au sélecteur parent : &

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

est compilé en :

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

& sera remplacé par le sélecteur de parent tel qu'il apparaît dans le CSS.

3 - Propriétés imbriquées

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

est compilé en

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

4 - Commentaires

Comme en CSS, les commentaires peuvent être introduits par /* */ and //. Lors de la compilation le commentaire multiline /* */ est preservé alors que le simple ligne // est éludé.

5 - MediaQuery imbriqué

Sass permet d'imbriquer les media queries dans d'autres règles, ce qui facilite la visualisation des styles appliqués à un objet donné :

//Imbrication de media query

.container {
  width: 940px; 
	// Si la largeur de l'écran est inférieure à 940px, passer à une présentation fluide
  @media screen and (max-width:940px) {
    width: auto; }
  }
}

est compilé en


.container { 
  width: 940px;
}
@media screen and (max-width:940px) { 
 .container {
   width: auto; 
 }
}

VI SassScript

SassScript est un ensemble d'extensions permettant l'utilisation de variables, d'expression arithmetique , et de fonctions usuelles.

1 - Variables: $

Les variables débutent par un $ , exemple :

$a: 5em;

Après cette affectation, la variable pourra être utilisé dans une propriété par exemple :

#main {
  width: $a;
}

Après compilation

#main {
  width: 5em;
}

Portée des variables :

Lorsqu'elles sont définies à l'extérieur de tout sélecteur, les variables ont une portée globale, sinon elles ne portent que dans au niveau du sélecteur dans lequel elles sont définies ainsi quetous les sous-niveaux imbriqués. On peut alors être accompagnées de l'indicateur !global qui rendra alors leur portée globale.

#main {
  $b: 5em !global;
  width: $b;
}
#sidebar {
  width: $b;
}

sera compilé en :

#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

Typage des données : 7 types de données pour Sass

Interpolation: #{}

Les variables peuvent aussi utilisées dans les noms de sélecteurs comme de propriétés, gràce à la syntaxe #{}. Par exemple :

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

sera compilé en

p.foo {
  border-color: blue; }

2 - Structure de choix

Un exemple parlera davantage :

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Sera compilé en

p {
  color: green; }

3 - Structure de boucle @for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
sera compilé en
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }
Tour de chauffe 1
Voici un premier galop d'essai pour se chauffer et préparer à la génération de grille responsive.

On souhaite générer les lignes suivantes. Il s'agit de partager une .container de largeur quelconque en 12 parties égales. Ecrire le SASS correspondant.
.column-1 {width: 8.33333%;}
.column-2 {width: 16.66667%;}
.column-3 {width: 25%;}
.column-4 {width: 33.33333%;}
.column-5 {width: 41.66667%;}
.column-6 {width: 50%;}
.column-7 {width: 58.33333%;}
.column-8 {width: 66.66667%;}
.column-9 {width: 75%;}
.column-10 {width: 83.33333%;}
.column-11 {width: 91.66667%;}
.column-12 {width: 100%;}

Cette division sera le premier acte pour construire notre grille.

corrigé : grille_tour_de_chauffe1.scss

Modifier le code afin que le nombre de parties soit variable (contenu dans la variable $grid-columns)

corrigé : grille_tour_de_chauffe2.scss

4 - Structure de boucle @each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
sera compilé en
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

une assignation multiple est aussi possible

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

Cette association multiple peut utilisée une liste d'association clef:valeur (map)

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
compilé en
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

5 - Structure de boucle @while

Cité ici pour mémoire, le lecteur saura bien l'imaginer...

6 - Fonctions usuelles

//Transformation et ajustement des couleurs

$base-link-color: #00f; 
a {
  color: $base-link-color; 
}
a:visited {
// réduit la luminosité (en termes HSL)
// de 50%, sans modifier la teinte ni la saturation 
  color: darken($base-link-color, 20%);
} 
figcaption {
// Génère une valeur rgba() de couleur avec 50% d'opacité
  background-color: transparentize(#fff, 50%); 
}

7 - Fonctions développeurs

SASS apporte une notion de fonction, équivalente à ce que propose d'autre langage comme PHP, Javascript, … Une fonction est un code qui renvoie une valeur.

Voici un exemple à méditer :

$grid-width: 40px;
$gutter-width: 10px;
 
@function grid-width($n) {
	@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }

VII Mixins

Un premier exemple sera plus parlant qu'une lourde définition, voici comment est défini un mixin :

@mixin center() {
      display: block;
      margin-left: auto;
      margin-right: auto;
}
et une utilisation de ce mixin
.container {
      @include center();
      /* vos autres styles ici... */
}

/* d'autres styles... */

.image-cover {
      @include center;
}

Les mixins peuvent ainsi contenir des règles CSS mais aussi des variables et tout ce qui est permis dans un document Sass.

Ils peuvent prendre aussi des arguments, par exemple :

@mixin size($a, $b) {
      width: $a;
      height: $b;
}

L'appel prendra la forme :


.cover {
      @include size(100%, 10em);
}

VIII Placeholder

Placeholder agit un peu comme un mixin mais ne permet pas d'y mettre des variables. Le placeholder commence par un % :

%center {
      display: block;
      margin-left: auto;
      margin-right: auto;
}

Il a appelé par la directive @extend :

.container {
      @extend %center;
}
.image-cover {
      @extend %center;
}

La différence avec mixin, c'est que dans l'exemple précédent, la compilation va factoriser les déclarations de la façon suivante :

.container, .image-cover {
      display: block;
      margin-left: auto;
      margin-right: auto;
}

IX Des SCSS partiels pour organiser le code

Pour s'organiser, le développeur compétent répartit son code CSS sur plusieurs feuilles de style, par exemple :

//Syntaxe d'importation dans CSS
  @import url('/partage/global.css');
  @import url('/pages/accueil.css');
  @import url('/pages/blog.css');

Ce n'est pas la meilleure pratique, car pour chacun de ces imports (un fichier séparé), déclenche une requête pour être chargé par le navigateur, ce qui peut ralentir le chargement de votre site et diminuer vos scores sur YSlow et Google Page Speed.

La commande @import existe déjà dans CSS pour lier entre elles des feuilles de styles externes. Sass l'utilise aussi mais avec une différence : le contenu des partiels est inséré directement dans le CSS final lors de la compilation. Au final, on obtient un fichier unique contenant tous les styles, il n'y aura donc qu'une requête unique pour charger le CSS dans la page.

Pour optimiser encore le temps de chargement, Sass peut aussi compacter automatiquement le fichier de sortie CSS en éliminant tous les espaces inutiles et les sauts de ligne.

//Syntaxe d'importation dans SASS
  @import '/partage/_global.scss';
  @import '/pages/_accueil.scss';
  @import '/pages/_blog.scss';

Les noms de fichiers de partiels doivent commencer par un underscore. L'underscore permet au compilateur de reconnaitre un partiel. Un partiel ne peut pas être compilé seul.

XX Webographie

http://sass-lang.com/guide

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

https://la-cascade.io/se-lancer-dans-sass/

http://www.alsacreations.com/astuce/lire/1304-utiliser-sass-et-scss-sur-un-serveur-distant.html

XXX TD Les systèmes de grilles de mise en page sont une bonne application du langage Sass

http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html

Tour de chauffe 2
Poursuivons l'exercice du "tour de chauffe1". Voici un SCSS partiel contenant une première affectation sur les variables à utiliser.
// grid variables
$grid-columns: 12;
$grid-max-width: 65em;
 
 
// breakpoints
$breakpoint-small: "only screen and (min-width: 20em)";
$breakpoint-medium: "only screen and (min-width: 30em)";

Ecrire le SASS générant à l'aide du partiel précédent (3 de ces variables devront y être utilisées)le CSS suivant

@media only screen and (min-width: 30em) {
  .wrapper {
    width: 95%;
    max-width: 65em; }
 
  .column-1 {
    width: 25%; }
 
  .column-2 {
    width: 50%; }
 
  .column-3 {
    width: 75%; }
 
  .column-4 {
    width: 100%; } 
}

corrigé : grille_tour_de_chauffe3.scss

Synthèse : génération de la grille responsive finalisée grid.scss, à commenter.