Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!
Utilisez le langage SASS et gagnez du temps d’intégration HTML/CSS

Utilisez le langage SASS et gagnez du temps d’intégration HTML/CSS

7 août 2014Par David Malo
Catégories :

Si vous êtes familier avec le domaine du Web, vous avez peut-être remarqué que l’abréviation SASS se termine par les deux mêmes lettres qu’une autre abréviation très populaire, à savoir le CSS. Ce n’est pas une pure coïncidence : les deux font sensiblement la même chose. Le CSS (Cascading Style Sheets) est le langage de code utilisé par les navigateurs Web pour interpréter les styles d’une page. Ce langage est donc indispensable si on veut avoir un site Web dont le visuel ne ressemblerait pas à du texte noir sur une page blanche.

Le CSS est officiellement utilisé depuis 1996. S’il fait toujours partie des sites Web de nos jours, c’est qu’il a fait ses preuves. Il est assez simple pour supporter les anciens navigateurs, mais assez flexible pour supporter les plus récents ainsi que leurs nouveaux styles. Mais si j’avais un bémol à lui donner, c’est que depuis toutes ces années, la façon de coder en CSS n’a pas vraiment changé et peut parfois sembler redondante. Par contre, depuis 2007, un nouveau langage tente de faire évoluer les choses.

La différence entre CSS et SASS

SASS (Syntactically Awesome Style Sheets), tout comme LESS (Leaner CSS), est un langage de script qui nous permet d’optimiser le temps de production d’un site ou d’une application Web en rajoutant certaines fonctionnalités au CSS. Voyez-le un peu comme un mixte entre le CSS et un langage de script tel que JavaScript. On code les styles du site Web dans un fichier .scss ou .sass, puis on se sert d’un logiciel (Prepros, Sassmeister ou encore Koala) qui va convertir notre code SASS en fichier .css, lequel sera ensuite utilisé par le site Web ou l’application pour afficher les styles. Donc au final on se retrouve toujours avec un fichier .css, mais le chemin que nous prenons pour créer ce fichier est assez différent de nos anciennes méthodes.

Quels genres d’optimisation peut-on faire?

SASS nous offre la possibilité d’utiliser des comportements qui sont traditionnellement réservés aux langages de programmation, tels que des variables, des fonctions et bien plus. J’ai compilé une liste de certains éléments qui pourraient bien vous être utiles si vous voulez surfer sur la nouvelle vague du SASS.

Les variables

Plus le projet devient grand, plus les mêmes couleurs et types de police risquent d’être réutilisés. Les variables nous permettent de stocker dans une variable une chaîne de caractères qui reviendra souvent dans la feuille de styles. On peut penser notamment aux couleurs primaires, secondaires et tertiaires d’un site, à une liste de polices spéciales qui est utilisée sur certains titres ou encore à une durée de transition d’animation qu’on voudrait de longueur uniforme dans tout le site.

Exemple:
$couleurPrimaire = #484848;
$listeFonts = "Lato", Arial, Helvetica, sans-serif;
h1{
	color:$couleurPrimaire;
	font-family:$listeFonts;
}
Résultat:
h1{
	color:#484848;
	font-family:"Lato", Arial, Helvetica, sans-serif;
}

La hiérarchie des éléments

SASS nous propose une nouvelle façon de créer l’effet de cascade des feuilles de styles. Ça nous permet d’imbriquer les différents sélecteurs beaucoup plus rapidement, sans avoir à réécrire la hiérarchie de notre sélecteur.

Exemple:
header{
	padding:1%;

	.logo{
		opacity:0.5;

		&:hover{
			opacity:1;
		}
	}
}
Résultat:
header{
	padding:1%;
}
header .logo{
	opacity:0.5;
}
header .logo:hover{
	opacity:1;
}

*Notez bien que dans l’exemple ci-dessus j’ai utilisé le sélecteur « & ». Ce sélecteur peut être utilisé lors de l’imbrication des éléments. Il est synonyme de l’élément en cours.

L’importation de fichiers

Il est parfois pratique de travailler avec plusieurs feuilles de styles différentes lors du développement d’un site afin d’éviter de chercher certains styles. Par contre, lorsqu’on met le site en production, on veut n’avoir qu’un seul fichier pour centraliser l’information. Avec SASS, on peut créer autant de fichiers qu’on veut, puis les importer dans notre fichier principal à l’aide de la structure suivante: @import « normalize « ;.

Dans le cas précédent, on aurait un dossier qui contiendrait notre fichier SASS ainsi que le fichier « normalize.css ». Lors de la compilation du fichier SASS, le contenu du fichier « normalize.css » remplacera la règle « @import » de notre fichier SASS, pour au final n’avoir qu’un seul fichier CSS qui contiendra les styles du fichier normalize et ceux de notre fichier SASS.

Les mixins

Depuis l’arrivée du CSS3, on ne cesse d’être bombardés avec des nouveaux sélecteurs pour supporter des nouveaux styles sur différents navigateurs. Ça implique qu’il faut parfois réécrire la même règle deux, trois, voire même quatre fois. C’est là qu’entrent en jeu les mixins. Ceux-ci nous permettent de spécifier une règle ainsi que ses « sous règles ». Le reste du code s’écrira tout seul.

Exemple:
@mixin border-radius($radius: 3px) {
	-moz-border-radius:$radius;
	-webkit-border-radius:$radius;
	border-radius: $radius;
}
.logo{
	@include border-radius(0.5em);
}
Résultat:
.logo{
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
}

*Si vous voulez une liste pratique de plusieurs mixins à utiliser, en voici une. Elle assez complète et très facile à utiliser. Vous pouvez même faire un petit @import de cette feuille de styles dans votre fichier.

Les fonctions

À l’image des fonctions qui sont utilisées en JavaScript, on peut créer des fonctions qui nous permettront de calculer un résultat qui sera ensuite utilisé dans notre fichier CSS. C’est selon moi une des options les plus pratiques de SASS puisqu’elle nous sauve énormément de temps, surtout lorsque vient le temps de faire un site responsive.

En effet, lorsqu’on crée un site responsive, on a beaucoup de mesures à calculer afin qu’elles correspondent à la maquette et qu’elles s’adaptent aux différentes tailles d’écran. Avant d’utiliser SASS, je me retrouvais toujours avec des dizaines de fenêtres de calculatrices ouvertes sur mon poste à chaque fois que j’avais une valeur en em ou en pourcentage à mettre sur un élément. Maintenant, c’est SASS qui fait ça pour moi!

Fonction pour calculer les em:
@function em($target, $context: 16) {
	@return ($target / $context) * 1em;
}
Fonction pour calculer les pourcentages:
@function percent($elem, $container){
	@return #{(($elem * 100) / $container) + ‘%’};
}
Exemple:
header{
	font-size:em(30);
	max-width:1150px;

	.logo{
		float:left;
		font-size:em(22,30);
		width:percent(320,1150);
	}
}
Résultat:
header{
	font-size:1.875em;
	max-width:1150px;
}
header .logo{
	float:left;
	font-size:0.733333em;
	width:0.2782608%;
}

L’héritage de propriétés

Cette option peut être pratique dans certains cas comme pour transmettre les propriétés d’un élément dans un autre.

Exemple:
.message {
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
}
.succes {
	@extend .message;
	border-color: green;
}
Résultat:
.message, .succes{
	border: 1px solid #cccccc;
	padding: 10px;
	color: #333;
}
.succes {
	border-color: green;
}

En conclusion

Ça peut paraître intimidant de commencer à changer les méthodes qu’on utilise depuis des années, mais croyez-moi ça en vaut la peine. Après avoir fait du SASS pendant une heure ou deux, vous  ne pourrez plus vous passer des fonctionnalités simples et efficaces qui vous permettent de sauver du temps lors du montage HTML/CSS de votre site.