Temps de lecture : 8 minutes environ.
Série : Introduction à Scss
Introduction
Bienvenue dans ce tutoriel consacré à SCSS. Nous allons explorer les fonctionnalités avancées de SCSS telles que les variables, l'imbrication, les imports et les mixins. Ces fonctionnalités vous permettront de structurer et de maintenir votre code CSS de manière plus efficace.
Structure du Projet
Voici la structure du projet que nous allons utiliser :
scss
│
├─ mixins
│ └─ _mixins.scss
│
├─ partials
│ └─ _variables.scss
│
└─ styles.scssUtilisation des Imports
Les imports en SCSS vous permettent de diviser votre code en plusieurs fichiers, ce qui facilite la gestion et la maintenance. Vous pouvez importer des fichiers partiels contenant des variables, des mixins, ou même des styles spécifiques.
Importation des Fichiers Partiels
Dans styles.scss, nous importons les fichiers partiels _variables.scss et _mixins.scss :
@import "partials/variables";
@import "mixins/mixins";Cela permet de séparer les variables et les mixins dans des fichiers distincts, rendant le fichier principal plus propre et plus facile à lire.
Utilisation des Variables
Les variables SCSS vous permettent de stocker des valeurs que vous pouvez réutiliser dans votre feuille de style. Cela rend votre code plus maintenable et facile à mettre à jour.
Déclaration des Variables
Déclarez vos variables dans un fichier partiel, par exemple _variables.scss :
$primary-color: #3498db;
$secondary-color: #2ecc71;
$base-spacing: 16px;
$large-spacing: $base-spacing * 2;
$small-spacing: $base-spacing / 2;
$font-stack: 'Helvetica, Arial, sans-serif';
$heading-font-size: $base-font-size * 1.5;Utilisation des Variables
Importez ensuite ce fichier partiel dans votre fichier principal styles.scss et utilisez les variables :
@import "partials/variables";
:root {
--primary-color: #{$primary-color};
--secondary-color: #{$secondary-color};
--base-font-size: #{$base-font-size};
--base-spacing: #{$base-spacing};
}
body {
background-color: var(--primary-color);
.container {
@include center-content;
height: 100vh;
font-size: $base-font-size;
}
}Utilisation des Mixins
Les mixins SCSS vous permettent de définir des styles réutilisables que vous pouvez inclure dans vos sélecteurs. Cela évite la répétition de code et rend votre CSS plus modulaire.
Définition des Mixins
Définissez vos mixins dans un fichier partiel, par exemple _mixins.scss :
@mixin button-style($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
padding: 10px 20px;
border-radius: 5px;
}
@mixin center-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}Utilisation des Mixins
Importez ensuite ce fichier partiel dans votre fichier principal styles.scss et utilisez les mixins :
@import "mixins/mixins";
.button-primary {
@include button-style($primary-color, #fff);
}
.button-secondary {
@include button-style($secondary-color, #fff);
}Imbriquation
L'imbrication en SCSS vous permet de structurer votre CSS de manière hiérarchique, ce qui reflète la structure de votre HTML. Cela rend votre code plus lisible et plus facile à maintenir.
Exemple d'Imbriquation
body {
background-color: $primary-color;
.container {
@include center-content;
height: 100vh;
font-size: $base-font-size;
}
nav {
ul {
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
}Conclusion
En utilisant les variables, les mixins, l'imbrication et les imports, vous pouvez rendre votre code SCSS plus modulaire, réutilisable et maintenable. Ces fonctionnalités vous permettent de structurer votre CSS de manière plus efficace et de simplifier le processus de développement front-end.
