Se connecter Recherche

Nous avons préalablement vu ensemble ce qu’était le langage SASS et appris à mettre en place un environnement de travail. Ce langage dynamique d’écriture de style est réellement puissant mais sa syntaxe est assez éloigné du CSS conventionnel, correspondant plutôt à un mélange entre le JavaScript et le PHP. C’est pourquoi nous allons voir ensemble la base de l’écriture en SASS et son utilisation de base.

Les commentaires

S’il y a une chose à faire lorsqu’on débute l’apprentissage d’un nouveau langage, c’est commenter son code. Ce procédé vous permet de créer des point de repère, inscrire une note mémo de « pourquoi on a écrit ça et à quoi ça sert » ou encore directement noter des url de tuto utilisés pour créer votre projet.
Le SASS n’échappe pas à la règle puisqu’il dispose d’une syntaxe de commentaire:

/* Ceci est un commentaire long
* pouvant etre étalé
* sur plusieurs lignes
* car répondant à une
* balise de fermeture
*/

// Ceci est un commentaire court non restitué ne prenant en chargee qu'une seule ligne

Ce type d’annotation ne vous rappelle rien?

INFOS: Lors de la compilation, les commentaires de type // ne sont pas reportés sur le fichier CSS généré. 

Compression de sortie

Ce paramètre se défini dans le fichier config.rb et défini la méthode de compression du CSS généré à partir de vos fichiers .scss

Prenons en exemple le code SASS:

#main {
  color: #fff;
  background-color: #000;

	p {
  	width: 10em;
	}
}

.huge {
  font: {
  	size: 10em;
  	weight: bold;
    }
  text-decoration: underline;
}

Sera restitué en sortie CSS :expanded

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

Sera restitué en sortie CSS :nested

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

Sera restitué en sortie CSS :compact

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

Sera restitué en sortie CSS :compressed

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Les règles imbriquées

Ce qui va vous faire gagner un temps précieux avec l’utilisation du Sass, c’est la possibilité d’écrire des règles CSS imbriquées les unes dans les autres. La règle définie sera applique uniquement aux éléments situé dans le sélecteur de la règle extérieure.

Prenons en exemple le code SASS:

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

Vous restituera en code CSS:

#main {
  width: 97%; 
}
#main p, #main div {
    font-size: 2em; 
}
#main p a, #main div a {
      font-weight: bold;
}
#main pre {
    font-size: 3em; 
}

Les sélecteurs parents

On utilise régulièrement le CSS pour donner une apparence différents aux éléments selon leur état. Par exemple, vous voudrez peut-être avoir des styles spéciaux pour un élément lors du survol de la souris ou lorsque celui-ci a une certaine classe. Dans ces cas, vous pouvez spécifier où le sélecteur de parent devrait être inséré en utilisant le caractère &.

Prenons en exemple le code SASS:

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

Vous restituera en code CSS:

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

Propriétés imbriquées

CSS a quelques propriétés qui utilise le même prefixe de nom. Par exemple, font-family, font-size et font-weight utilise tous font-. En CSS, si vous souhaitez définir un tas de propriétés dans ce même préfixe, vous devez le saisir à chaque fois. SASS fournit un raccourci pour cela: il suffit d’écrire le prefixe une fois, puis d’y définir chacune des sous-propriétés en son sein.

Prenons en exemple le code SASS:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
.foo {
  border: {
  	width: 2px;
  	style: dotted;
	color:blue
    }
}

Vous restituera en code CSS:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }
  
.foo {
  border-size: 2px;
  border-style: dotted;
  border-color: blue;
}

Utiliser des variables

Peut être l’élément le plus intéressant dans l’utilisation du langage SASS. Très simple à utiliser ,les variables se définissent en préfixant votre règles avec le signe dollar ($), et sont considérées comme valeur de propriétés CSS:

Prenons en exemple le code SASS:

// créer les variables
$width: 5em;
$height: 100px;
// utiliser les variables
#main {
  width: $width;
  height: $height;
}

Vous restituera en code CSS:

#main {
  width: 5em;
  height:100px;
}

Les variables ont plusieurs niveaux de disponibilités:

  • Cas 1 et Cas 1 bis: Si définies dans un sélecteur imbriqués, elles sont disponibles uniquement dans le niveau de sélecteurs imbriquées où elles sont définies.
  • Cas 2: Si définies en dehors de tous sélecteurs imbriqués, elles sont disponibles partout.
  • Cas 3: Mais peuvent également être définis avec le ! Indicateur global, auquel cas elles sont aussi disponibles partout.

Cas 1

// cas 1
#main {
  $width: 10em;
  width: $width;
  
  div {
  	width: $width/2;
    }
}

INFOS: Vous noterez l’utilisation d’une opération dans cette exemple! C’est une fonctionnalité de SASS mais nous verrons cela plus tard.

Vous restituera en code CSS:

#main {
  width: 10em;
}
#main div {
  width: 5em;
}

Cas 1 bis

Essayons d’utiliser une variable en dehors de son champ d’action:

#main {
  $width: 10em;
  width: $width;
  
  div {
  	width: $width/2;
    }
}

.bar {width:$width}

Vous noterez l’utilisation d’une opération dans cette exemple! C’est une fonctionnalité de SASS mais nous verrons cela plus tard.

Vous restituera en code CSS:

/* Normalement
#main {
  width: 10em;
}
#main div {
  width: 5em;
}
*/
/* ======== MAIS ========= */
.bar {width:Restitue une erreur car la variable n'est pas définie dans ce champ}

Infos: Si votre code SASS est erronée, la fenêtre de commande vous reverra une erreur du type:

error sass/style.css line58: Undefined variable: "$width"

Et votre fichier CSS un log de cette erreur sous la forme :

/*
Error: Undefined variable: "$width".
        on line 58 of C:/compass-project/premier-projet/mon-premier-projet/sass/style.scss

53:   
54:   div {
55:   	width: $width/2;
56:     }
57: }
58: .bar {width:$width}

Dans ce cas d’erreur, le fichier CSS n’est pas créé mais votre travail SASS n’en est pas affecté. Vous avez juste pour obligation de corriger l’erreur avant de pouvoir recréer la sortie CSS.

Cas 2

Prenons en exemple le code SASS:

$width: 10em;

#main {
  width: $width;
  
  div {
  	width: $width/2;
    }
}

.bar {width:$width}

Vous restituera en code CSS:

#main {
  width: 10em;
}
#main div {
  width: 5em;
}

.bar {width:10em}

Cas 3

Prenons en exemple le code SASS:

#main {
  $width: 10em !global;
  width: $width;
  
  div {
  	width: $width/2;
    }
}

.bar {width:$width}

Vous restituera en code CSS:

#main {
  width: 10em;
}
#main div {
  width: 5em;
}

.bar {width:10em}

Vous voilà initié aux principes de base d’utilisation des variables SASS.

L'interpolation

Les variables ne sont pas destinées à uniquement définir des valeurs, vous pouvez également utiliser des variables SassScript pour cibler des sélecteurs et des noms de propriété en utilisant la syntaxe d’interpolation # {}.

Prenons en exemple le code SASS:

$name: foo;
$attr: border;

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

Vous restituera en code CSS:

p.foo {
  border-color: blue; }

Cette syntaxe peut également avoir le même comportement qu’une variable vue précédemment. Bien que je trouve cette utilisation un peu plus lourde à écrire, elle n’en reste pas moins conforme et pris en charge lors de la compilation. Mais cette utilisation à un atout, elle permet de contrer l’interprétation d’opération, ce qui d’en certain cas est utile.

Prenons en exemple le code SASS:

$font-size: 12px;
$line-height: 30px;

p.operation {
  font: $font-size/$line-height;
}
  
p.sansoperation {
  font: #{$font-size}/#{$line-height};
}

Vous restituera en code CSS:

p.operation {
  font: 0.4;
}

p.sansoperation {
  font: 12px/30px;
}

Vous remarquerez très clairement la différence de sortie selon la syntaxe utilisée.

Création et @import de fichiers

Un autre atout du SASS est, de part sa méthode de compilation, la possibilité d’organiser ses styles en de multiples fichiers pour, au final, les regrouper en un seul fichier CSS.

En bref, fini de parcourir des feuilles de style de 4000 lignes pour atteindre la règle ciblée et vive les petits fichiers de 200 lignes ne concernant qu’un élément bien précis.

Comme pour le CSS, SASS utilise @import. Mais contrairement au langage classique, cette directive l’informe des fichiers SCSS à regrouper lors de la compilation pour au final ne restituer qu’un seul et unique fichier CSS (lui aura bien ses 4000 lignes par contre).

Seule habitude que vous devrez prendre, un fichier .scss destiné à l’import doit s’écrire précisement _monfichier.scss et non monfichier.scss (notez la présence du underscore avant le nom du fichier):

  • Un fichier utilisant underscore sera importé et le CSS généré dans le fichier appelant.
  • Un fichier sans underscore sera importé, le CSS généré dans le fichier appelant ET sera également créé en tant que fichier indépendant (incluant les règles de styles y étant écrite) dans le dossier de sortie. Vous aurez donc au final un doublon de règles de styles.

SASS est intelligent, vous n’etes pas obligez de spécifier l’extension du fichier car il recherchera seul l’extension .scss ou .sass. Comme pour tous langage, vous devez tout de même obligatoirement définir le chemin de dossier.
Voyons les différentes méthode d’import:

// importer un fichier
@import "foo.scss";
//peut s'écrire
@import "foo";

// importer depuis une url
@import "http://bar.com/foo";

//importer une font
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
// importer une font défini par variable
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

Media queries

En SASS, les directives @media se comportent pour le CSS classique, avec une capacité supplémentaire: elles peuvent être imbriqués dans les règles CSS (et c’est vraiment pratique). Cela rend plus facile l’ajout de styles responsives spécifiques sans avoir à réécrire les sélecteurs ou naviguer sans cesse dans votre feuille de style.

Prenons en exemple le code SASS:

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

Vous restituera en code CSS:

.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

Les directives de @media supportent également l’imbrication.

Prenons en exemple le code SASS:

.sidebar {
  width: 800px;
  	@media screen {
    	@media (max-width:768px) {
      	width: 600px;
    	}
		@media (max-width:500px) {
      	width: 300px;
    	}

	}
}

Vous restituera en code CSS:

.sidebar {
  width: 800px;
}
@media screen and (max-width: 768px) {
  .sidebar {
    width: 600px;
  }
}
@media screen and (max-width: 500px) {
  .sidebar {
    width: 300px;
  }
}

Utilisation des couleurs

SASS dispose d’une fonction de compilation qui vous autorise la manipulation des couleurs lors de l’écriture de règles dans ce language. Vous allez ainsi pouvoir très simplement les assombrir, éclaircir, jouer en transparence, … sans avoir à rechercher l’équivalent hexadecimal (ou rgba) puisque SASS va faire le travail pour vous. Je vous indique donc les différentes syntaxe relative à différents effets:

Prenons en exemple le code SASS:

$base-color: #AD141E;

.colorlight {
background:lighten( $base-color, 10% );
}
.colordark {
background:darken( $base-color, 10% ); 
}
.colorsaturate {
background:saturate( $base-color, 20% );
}
.colordesaturate {
background:desaturate( $base-color, 20% );
}
.colorhue {
background:adjust-hue( $base-color, 20% );
}
.colorrgba {
background:rgba( $base-color, .7 );
}
.colortint {
background:tint( $base-color, 10% );
}
.colorshade {
background:shade( $base-color, 10% );
}

// En autre fonctionnement
/*
mydiv {
border: 1px solid darken($base-color, 20%);
text-shadow: 0 -1px 0 darken($base-color, 10%);
}
*/

Vous restituera en code CSS:

.colorlight {
  background: #db1926;
}

.colordark {
  background: #7f0f16;
}

.colorsaturate {
  background: #c0010d;
}

.colordesaturate {
  background: #9a272f;
}

.colorhue {
  background: #ad3d14;
}

.colorrgba {
  background: rgba(173, 20, 30, 0.7);
}

.colortint {
  background: #b52b34;
}

.colorshade {
  background: #9b121b;
}
/*...*/

Vous avez maintenant connaissance des syntaxes indispensables pour prendre un bon départ dans la création de vos feuilles de styles en langage SASS. Mais ne vous arretez pas là! SASS est bien plus puissant que ça, mais nous en parlerons dans un prochain article.


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*