SASS – Leçon 5 : les conditions et les boucles

Les conditions

Avec les conditions, il est possible de vérifier certaines informations dans notre fichier SCSS. Par exemple, si la couleur est égale à orange, alors on définie de nouveaux parametres :

	// définition des variables '$shadow' et '$color'
	$shadow: '"';
	$color: orange;

	// Si $color est égale à 'orange'
	@if ($color == orange) {

	// Alors shadow vaut :
	$shadow: 0 0 5px black
	}

	// Sinon si $color est égale à 'blue'
	@elseif ($color == blue) {

	// Il est également possible de redéfinir la variable
	$color: pink;
	$shadow: 0 5px 0 red;
	}

	// Sinon, $shadow prendra les valeurs
	@else {
	$shadow: 5px 5px white;
	}

	.maClass {
	color: $color;
	box-shadow: $shadow;
	}

view raw condition.scss hosted with ❤ by GitHub

CSS généré :

	.maClass {
	color: orange;
	box-shadow: 0 0 5px black;
	}

view raw condition.css hosted with ❤ by GitHub

Grâce à cette condition, il est possible de changer la valeur de $shadow en paramétrant $color. Dans cet exemple, nous vérifions la valeur de $color, néanmoins, plusieurs autres comparaisons sont possible. Découvrez tous les control directive de SASS.

Les boucles

Les boucles permettent de répéter une instruction autant de fois que vous le souhaitez.

La boucle @for

	@for $i from 1 through 6 {
	.grid-#{$i} {
	width: 100px*$i;
	}
	}

view raw loop-for.scss hosted with ❤ by GitHub

CSS généré :

	.grid-1 { width: 100px; }
	.grid-2 { width: 200px; }
	.grid-3 { width: 300px; }
	.grid-4 { width: 400px; }
	.grid-5 { width: 500px; }
	.grid-6 { width: 600px; }

view raw loop-for.css hosted with ❤ by GitHub

La boucle @while

	$i: 6;

	@while $i > 0 {
	.item-#{$i} { width: 2em * $i; }
	$i: $i - 2;
	}

view raw loop-while.scss hosted with ❤ by GitHub

CSS généré :

	.item-6 { width: 12em; }
	.item-4 { width: 8em; }
	.item-2 { width: 4em; }

view raw loop-while.css hosted with ❤ by GitHub

La boucle @each

	// @each permet de parcourir une liste :
	@each $animal in puma, sea-slug, egret, salamander {
	.#{$animal}-icon {
	background-image: url('/images/#{$animal}.png');
	}
	}

view raw loop-each.scss hosted with ❤ by GitHub

CSS généré :

	.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');
	}

view raw loop-each.css hosted with ❤ by GitHub

Cette liste peut être définie dans une variable (comparable aux tableaux en PHP). Chaque valeur doit être séparée par une virgule.
Exemple : $var: puma, sea-slug, egret, salamander;