Qu’est-ce qu’un préprocesseur CSS?

C’est un outil permettant de transformer un langage (avec une syntaxe semblable à CSS), en CSS valide. La syntaxe du langage est souvent tellement proche de celle du CSS qu’on voit à peine la différence. Les préprocesseurs apportent une aide à l’écriture de vos feuilles de style. Aujourd’hui, les deux préprocesseurs les plus utilisés sont Sass et Less.

Les préprocesseurs les plus utilisés

SASS

Foundation
Compass
Bourbon

Les préprocesseurs les plus utilisés

LESS

Twitter Bootstrap
LESS Elements
LESS Hat

Les préprocesseurs les plus utilisés

Stylus

Nib

Importation (@import)

Éviter la règle CSS “@import’’

Le “@import” des fichiers .scss se produit lors de la compilation au lieu du coté client.

Importation (@import) suite

						
/* import sans le "_" */
@import "le_fichier_importe";

/* import avec le "_" */
@import "_le_fichier_importe";							
						
					

Importation (@import) suite

différence entre les deux façons d'importer

Importation (@import) suite

@import dans un sélecteur

						
.maclass {
	@import "_le_fichier_importe";
}
							
						
					

imbriquation

imbriquation (suite)

imbriquation des sélecteurs

						
.ma-classe-parent {
	.ma-classe-enfant {
		strong {
			color: black;
		}
	}
}

/* CSS GÉNÉRÉ */
.ma-class-parent .ma-class-enfant strong { color: black; }
						
					

* Ne pas dépasser 3 niveaux d'imbriquation

nesting (imbriquation)

à ne pas faire

						
.ma-classe-parent {
	.ma-classe-enfant {
		span {
			a {
				strong {
					color: black;
				}
			}
		}
	}
}
						
					

imbriquation (suite)

imbriquation des propriétés

						
.ma-class-parent {
	font:{
		size: 12px;
		weight: 700;
		style: italic;
	}
	
	background:{
		position: top left;
		repeat: no-repeat;
		color: #ccc;
	}
}

/* CSS GÉNÉRÉ */
.ma-class-parent {
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	
	background-position: top left;
	background-repeat: no-repeat;
	background-color: #ccc;
}

						
					

imbriquation (suite)

sélecteur parent ( & )

						
.ma-class-parent {
	.ma-classe-enfant {
		.touch & {
			color: black;
		}
	}
}

/* CSS GÉNÉRÉ */
.touch .ma-class-parent .ma-class-enfant { color: black; }

						
					

* .touch est une fonctionnalité de Modernizr

imbriquation (suite)

sélecteur :hover, :pseudo-element ( & )

						
.ma-class-parent {
	.ma-classe-enfant {
		&:hover {
			color: black;
		}
		
		&:first-child {
			color: red;
		}
	}
}

/* CSS GÉNÉRÉ */
.touch .ma-class-parent .ma-class-enfant:hover { color: black; }
.touch .ma-class-parent .ma-class-enfant:first-child { color: red; }

						
					

* .touch est une fonctionnalité de Modernizr

Variables

La façon la plus simple d’utiliser SASS est l’utilisation des variables.

Les variables commencent avec le signe “$” et sont déclarés comme des propriétés.

“$nom : valeur”

Les utilisations les plus fréquentes sont les chiffres, les couleurs et les fonts.

variables (suite)

						
$primary:	#1abc9c; /* turquoise */

$secondary:	#8E44AD; /* emerald */

$tertiary:	#3498db; /* peter river /*	

$hover:	$secondary;		

$family: 'Open sans', serif;

$margin: 10px 20px;				
						
					

variables (suite)

						
.ma-class {
	$width: 10px;
	
	width: $width;	
}			
						
					

Une variable créée dans un sélecteur n'est pas globale, donc ne peut être utilisée
pour d'autres sélecteurs.

@mixins

@mixins (suite)

						
@mixin circle($circle-size, $color) {
	width: 		$circle-size; 
	height: 	$circle-size; 
	background:	$color;

	@include border-radius($circle-size/2);
}		
						
					

@include

						
/* APPELÉ LE MIXIN */
.circle {
	@include circle(200px, red);
}
							
/* CSS GÉNÉRÉ */
.circle {
	width: 200px;
	height: 200px;
	background: red;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-ms-border-radius: 100px;
	-o-border-radius: 100px;
	border-radius: 100px;
}			
						
					

@extend

Nous voulons souvent utiliser les mêmes styles mais avec une légère différence. La façon la plus fréquente est d’utiliser une classe plus spécifique.

Avec SASS, la maintenance est beaucoup plus facile et cela permet d’éviter certaines erreurs.

Nous utilisons “@extend .classe” pour réutiliser les styles d’un selecteur sans avoir à tout dupliquer.

@extend (suite)

extend %placeholder

						
%border-bottom {
	padding: 0 0 30px 0;
	border-bottom: 2px blue solid;
}		

.ma-classe {
	@extend %border-bottom;
}

.mon-autre-classe {
	@extend %border-bottom;
}

/* CSS GÉNÉRÉ */
.ma-classe, .mon-autre-classe {
	padding: 0 0 30px 0;
	border-bottom: 2px blue solid
}
						
					

* le placeholder n'est pas compilé dans le .css final

Mathématiques

Sass supporte les operateurs standard

+ - * / %

Mathématiques (suite)

Les opérations mathématique (+, -, *, /, %)

						
1em + 1em; /* 2em */

1em - 1em; /* 0em */

1in + 72pt; /* 2in */

6px * 4; /* 24px /*

18 % 5; /* 3 */

						
					

Couleurs

Il est possible de faire des calculs avec les couleurs.
Les opérations sont appliquées sur le canal rouge, vert et bleu.

Plusieurs fonctions sont disponibles dans SASS

rgb, rgba, red, green, blue, mix, hue, saturation, lightness, lighten, darken, saturate, desaturate, greyscale, complement, invert, alpha, rgba et plusieurs autres.

couleurs (suite)

lighten, darken, rgba

						
.lighten {
	background: lighten($primary, 10);
}

.darken {
	background: darken($primary, 10);
}

.rgba {
	background: rgba($primary, 10);
}

						
					

couleurs (suite)

couleurs (suite)

Directives

Directives (suite)

@for

La déclaration du “@for” compile des styles de manière répétitive avec un compteur pour chaque itération.

directives (suite)

@if, @else

						
$var: false;

@if $var == true {
	&:before { 
		color:	$secondary;
		content: "$var == true, ce contenu s'affiche"; 
	}
}@else {
	&:before { 
		color:	$tertiary;
		content: "$var == false, ce contenu s'affiche"; 
	}
}
						
					

directives (suite)

@for

						
@for $i from 1 through 6 {
	.for-#{$i} {
		height : $i * 20#{px};
	}
}

/* CSS GÉNÉRÉ */
.for-1 { height: 20px; }
.for-2 { height: 40px; }
.for-3 { height: 60px; }
.for-4 { height: 80px; }
.for-5 { height: 100px; }
.for-6 { height: 120px; }

						
					

Compass

Compass est un framework pour SASS. Il contient une multitude de Mixins et d’outils pour nous aider à être plus rapide dans notre développement.

CSS3

Les mixins pour le CSS3 sont habituellement utilisés pour éviter d’écrire tous les préfixes des fureteurs. Ils sont aussi utiles pour fournir une solution alternative pour les plus vieux fureteurs.

Opacity, box-shadow, animations, font-face et plusieurs autres.

Helpers

Les helpers servent à améliorer les fonctions de SASS.

adjust-lightness, font-files, image-width, image-height, prefix, inline-image et plusieurs autres.

Typography

Mixins qui permettent de styler plus rapidement certains éléments typographiques.

Link effects, lists, texts

Utilities

Les utilities sont des mixins pour gagner du temps et aider à la maintenance du projet.

Sprites, clearfix, resets, browser support etc

Extensions

• Susy
• h5bp
• rgba-png
• ceaser
• animate.sass
• etc ...

Apps

• Codekit
• Prepros
• Mixture
• Koala

Codekit (mac seulement)

Prepros (mac & pc)

Version PDF