Utiliser Sass pour le développement local
Ce court tutoriel fait suite à notre article de blog détaillant les fonctionnalités principales de Sass. Il est conseillé de débuter par la lecture de celui-ci avant de continuer ici.
Mots clés :
web
performances
front-end
Initialisation et configuration du projet
Pour commencer il nous faut créer un dossier dédié à notre projet. Dans ce tutoriel nous l’appellerons “sass_intro”.
Pour initialiser notre projet et installer les paquets nécessaires à Sass il faut exécuter les deux commandes suivantes dans le terminal :
npm init -y
npm install sass
La première commande initialise un fichier package.json dans lequel les dépendances du projet seront définies. La seconde commande installe simplement Sass.
Une fois cette première étape passée, la suite consiste à créer la structure de base de notre page web afin de pouvoir y appliquer du CSS. Créez donc un fichier index.html ainsi qu’un dossier CSS contenant un fichier main.scss.
La structure est prête et elle devrait ressembler à ça :
sass_intro
CSS
main.scss
node_modules
index.html
package-lock.json
package.json
Enfin, modifions notre fichier package.json pour y ajouter le script de compilation Sass :
"scripts": {
"compile": "sass css/main.scss css/main.css --watch"
}
Cette commande se basera sur le fichier main.scss et le convertira en main.css lors de la compilation. Le paramètre --watch permet à Sass de compiler ensuite automatiquement à chaque modification des fichiers trackés par main.scss.
Le package.json une fois la mise en place terminée :
{
"name": "sass_intro",
"version": "1.0.0",
"description": "Sass tutorial",
"main": "index.js",
"scripts": {
"compile": "sass css/main.scss css/main.css --watch"
},
"author": "CodeBuds",
"license": "ISC",
"dependencies": {
"sass": "^1.52.3"
}
}
Utiliser Sass : votre premier fichier SCSS
Avant d’écrire nos styles il nous faut des éléments sur lesquels les appliquer. Ouvrez le fichier index.html et copiez-y le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SASS Tuto</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="container">
<button class="home">Accueil</button>
<button class="about">A propos</button>
<button class="help">Aide</button>
<div class="content">
<ul>
<li><a href="#">Un</a></li>
<li><a href="#">Deux</a></li>
<li><a href="#">Trois</a></li>
</ul>
</div>
</div>
</body>
</html>
Vous remarquerez que nous importons le fichier main.css dans la balise head. Ce fichier n’existe pas encore, mais il sera créé par le script de compilation préparée un peu plus tôt dans le package.json
À l’intérieur du dossier CSS, ajoutez les fichiers
_base.scss :
body {
background: $main-background-color;
font-size: 20px;
}
.container {
width: 60%;
margin: 0 auto;
}
_variables.scss :
$main-background-color: #f0c77a;
$content-background-color: #777;
_buttons.scss :
.nav-button {
padding: 10px;
border: 1px solid #ccc;
background: #777;
color: #fff;
letter-spacing: 1px;
cursor: pointer;
}
.home {
@extend .nav-button;
font-weight: bold;
}
.about {
@extend .nav-button;
}
.help {
@extend .nav-button;
}
button {
width: calc(200px / 2)
}
_content.scss :
.content {
background-color: $content-background-color;
ul {
list-style: none;
}
li {
float: left;
a {
&:link,
&:visited {
color: #4e4f48;
font-size: 16px;
text-decoration: none;
padding: 10px;
}
&:hover {
color: #fff;
background: lighten(#4e4f48, 10%);
}
}
}
}
Nos différents fichiers partiels doivent désormais être importés dans le fichier SCSS principal, qui sera ensuite compilé.
Il faut modifier le fichier main.scss pour y ajouter les imports :
@import 'variables';
@import 'base';
@import 'buttons';
@import 'content';
Rappel : L’ordre des imports a un impact, si vous ne commencez pas par importer variables alors que son contenu est utilisé dans les autres fichiers, le CSS ne compilera pas correctement !
Il ne nous reste d’ailleurs plus qu’à compiler notre Sass en utilisant :
npm run compile
Cette commande compile crée un nouveau fichier main.css dans le dossier CSS et surveille les modifications apportées au fichier main.scss afin de le convertir en temps réel en fichier CSS.
Et voilà ! Félicitations, si tout s’est bien passé vous devriez voir apparaître le fichier main.css dans votre dossier CSS et votre HTML devrait être impacté par l’ensemble des règles stylistiques que nous avons réparties dans les différents fichiers .scss. Essayez maintenant de modifier les valeurs de votre fichier _variables.scss, si vous n’avez pas interrompu le script de compilation votre CSS devrait se mettre à jour automatiquement et vos modifications apparaîtront lors du rafraîchissement de votre page.
C’est tout pour cet article, pour pousser votre connaissance de Sass n peu plus loin, vous pouvez démarrer par la lecture de quelques astuces pour aller plus loin dans votre utilisation des préprocesseurs CSS !
Partager l'article sur :
