Phone : 06 64 18 40 00 - Email : contact@multiverseconcept.com
L'intérêt d'utiliser un langage de script préprocesseur
Pourquoi utiliser SASS ?
SASS est un outil incontournable pour les développeurs web car il offre de nombreux avantages. En utilisant SASS, vous pouvez écrire votre code de manière plus claire et organisée, réduisant ainsi la répétition inutile. Cela permet également d’améliorer les performances de votre site en simplifiant le code CSS. De plus, SASS vous évite de devoir utiliser des point-virgules et des accolades, rendant ainsi votre travail plus agréable. En somme, SASS est un outil indispensable pour tout développeur web souhaitant améliorer la qualité de son code et faciliter son travail.
Sass (ou Syntactically Awesome Stylesheets) est un langage de feuille de style qui permet de rendre la création de feuilles de style plus efficace et plus facile à maintenir. Il offre des fonctionnalités telles que les variables, les boucles, les fonctions, et les imbrications qui ne sont pas disponibles dans CSS natif.
Voici quelques avantages clés de l’utilisation de Sass dans le développement d’un design CSS de site web :
Variables : Sass permet de définir des variables pour stocker des valeurs répétitives, comme les couleurs, les tailles de police, les marges, etc. Ces variables peuvent ensuite être utilisées dans toutes les règles de style, ce qui facilite la modification globale de l’apparence du site.
Boucles et fonctions : Sass permet de créer des boucles et des fonctions pour simplifier et automatiser les tâches répétitives. Par exemple, vous pouvez utiliser une boucle pour générer des règles de style pour une série de boutons, ou une fonction pour calculer des dimensions en fonction de la taille de la fenêtre.
Imbrications : Sass permet d’imbriquer des règles de style pour mieux organiser et structurer les feuilles de style. Cela permet de mieux refléter l’arborescence HTML de la page, facilitant ainsi la lecture et la modification des feuilles de style.
Import : Sass permet d’importer des fichiers Sass dans d’autres fichiers Sass. Cela permet de diviser les feuilles de style en plusieurs fichiers plus petits pour faciliter la maintenance, et d’importer ces fichiers dans un fichier principal pour compiler en un seul fichier CSS.
Mixins : Sass permet de créer des mixins, qui sont des groupes de propriétés CSS réutilisables qui peuvent être inclus dans plusieurs règles de style en utilisant une simple commande.
En utilisant ces fonctionnalités, Sass permet de rendre le développement de feuilles de style plus rapide et plus efficace, tout en améliorant la qualité et la maintenabilité du code.
Il est important de noter que le CSS généré par Sass doit être compilé avant d’être utilisé dans un site web, et que cette compilation peut être effectuée en utilisant des outils tels que le compilateur Sass ou des outils intégrés aux outils de développement tels que les environnements de développement intégrés (IDEs) ou les tâches de construction telles que Grunt ou Gulp.
Quelques exemples de code Sass
Déclaration de variables
// Déclaration d'une variable pour stocker la couleur principale du site
$primary-color: #ff0000;
// Utilisation de la variable pour définir la couleur de fond d'un élément
.header {
background-color: $primary-color;
}
Boucle Sass
// Déclaration d'un tableau de couleurs
$colors: red, blue, green, yellow;
// Boucle pour générer des règles de style pour chaque couleur
@each $color in $colors {
.#{$color}-text {
color: $color;
}
}
Fonction Sass
// Fonction pour calculer la largeur d'un élément en fonction de la taille de la fenêtre
@function container-width($window-size) {
@if $window-size >= 1200 {
@return 1200px;
} @else if $window-size >= 992 {
@return 992px;
} @else {
@return 720px;
}
}
// Utilisation de la fonction pour définir la largeur d'un conteneur
.container {
width: container-width(1200);
}
Imbrications
nav {
ul {
list-style: none;
margin: 0;
padding: 0;
li {
display: inline-block;
a {
display: block;
padding: 10px;
text-decoration: none;
&:hover {
background-color: lighten(#333333, 10%);
}
}
}
}
}
Dans cet exemple, nous utilisons des imbrications pour définir des styles pour différents éléments HTML qui sont imbriqués les uns dans les autres. Par exemple, les styles pour le élément li sont définis à l’intérieur des styles pour le élément ul, et les styles pour le élément a sont définis à l’intérieur des styles pour le élément li.
Cela permet de facilement maintenir les selecteur CSS en relation les uns aux autres, et donc d’éviter de les dupliquer ou de les faire pointer vers des éléments en dehors de leur contexte.
Cela donne après compilation ceci :
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 10px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3d3d3d;
}
Il est a noter que vous pouvez utiliser & (parent reference) pour remonter d’un niveau d’imbrication
Import
L’utilisation de la fonction @import permet de regrouper les feuilles de style en différents fichiers selon leur rôle ou les éléments de pages, de faciliter les modifications et mises à jour, de limiter les risques de redondance, , cela rend également plus facile de partager des morceaux de code entre projets ou de réutiliser des morceaux de code déjà existants.
Il est également possible d’utiliser la fonction @import pour importer des feuilles de style CSS natives dans un fichier Sass. Pour ce faire, il suffit de spécifier le nom ou le chemin d’accès du fichier CSS entre parenthèses, en incluant l’extension .css.
Par exemple :
@import "styles.css";Cela permet de continuer à utiliser des feuilles de styles CSS existantes dans un projet et de les intégrer avec les styles Sass.
Il est possible d’utiliser la fonction @import pour inclure des bibliothèques CSS ou Javascript externes pour utiliser les fonctionnalités de ces librairies. Il est important de noter que l’ordre d’import des fichiers importants est important, car certains fichiers peuvent dépendre de la présence de certains autres fichiers.
Les 4 avantages d’utiliser la fonction d’import :
Organisation : en divisant les feuilles de style en plusieurs fichiers, vous pouvez mieux organiser et structurer le code en regroupant les règles de style en fonction de leur rôle ou de leur relation avec les éléments de la page. Par exemple, vous pouvez créer un fichier pour les variables, un autre pour les mixins, un autre pour les boutons, etc.
Facilité de modification : en utilisant la fonction @import, vous pouvez facilement trouver et modifier les règles de style qui ne sont plus à jour sans avoir à parcourir toutes les feuilles de style. Cela permet également de limiter les risques de régression involontaires.
Réutilisation de code : en utilisant @import, vous pouvez réutiliser des parties de feuilles de styles dans plusieurs pages ou projets. Cela permet de limiter les répétitions de code et de faciliter la mise à jour des feuilles de styles réutilisées.
Chargement : en utilisant @import, vous permettez au navigateur de charger uniquement les fichiers CSS nécessaires à la page en cours, ce qui réduit les temps de chargement.
Il est important de noter que l’utilisation de la fonction @import entraine un certain nombre d’appels HTTP supplémentaires par rapport à un fichier unique. Si l’optimisation des performances est un critère important, il est possible d’utiliser un outil de build pour regrouper tous les fichiers importés en un seul fichier.
Voici un exemple de code d’un fichier Sass qui regroupe toutes les feuilles de style CSS pour un site web :
// Import des bibliothèques CSS externes
@import "normalize.css";
@import "font-awesome.min.css";
// Import des fichiers de style personnalisés
@import "variables";
@import "mixins";
@import "base";
@import "header";
@import "footer";
@import "home";
@import "about";
@import "contact";
// Import des styles pour les médias
@import "media-queries";
Dans cet exemple, nous utilisons la fonction @import pour inclure différents fichiers Sass dans notre fichier principal style.scss.
Nous commençons par inclure des bibliothèques CSS externes comme normalize.css et font-awesome.min.css, qui fournissent des styles de base pour la mise en forme du site.
Ensuite, nous importons des fichiers de style personnalisés tels que variables, mixins et base, qui définissent les couleurs, les polices, les tailles et les styles de base pour notre site. Ces fichiers peuvent être découpés par sections comme header, footer, home, about, contact pour bien séparer les styles pour chaque pages.
Enfin, nous incluons un fichier media-queries qui contient des styles pour les différentes tailles d’écran, pour s’assurer que le site est bien adapté à différentes résolutions d’écran.
Il est important de noter que l’ordre d’import est important, car certains fichiers peuvent dépendre de la présence de certains autres fichiers. Il est donc important de s’assurer que les bibliothèques nécessaires sont importées avant d’utiliser les fonctionnalités qu’elles fournissent.
Mixins
Les Mixins sont une fonctionnalité de Sass qui permet de regrouper des propriétés CSS réutilisables sous forme de fonction. Les Mixins permettent de réduire la redondance dans les feuilles de style en permettant de réutiliser des groupes de propriétés CSS dans plusieurs règles de style différentes.
Les 5 avantages clés de l’utilisation de Mixins :
Réutilisation de code : Les Mixins permettent de regrouper des propriétés CSS réutilisables sous forme de fonction, permettant ainsi de réduire la redondance dans les feuilles de style et d’éviter la répétition inutile de propriétés CSS.
Maintenance facilitée : En regroupant des propriétés CSS réutilisables dans des Mixins, il est plus facile de les maintenir car toutes les modifications apportées à un Mixin sont automatiquement répercutées sur tous les endroits où il est utilisé.
Modification globale : En utilisant des Mixins, il est plus facile de changer l’apparence globale d’un site en modifiant un Mixin, car tous les endroits où il est utilisé seront automatiquement mis à jour.
Passage d’arguments: Les Mixins peuvent recevoir des arguments, ce qui permet de passer des valeurs spécifiques pour les propriétés CSS dans le Mixin.
Fonctionnalités spécifiques : Les Mixins peuvent utiliser des conditions et des boucles pour générer des règles de style spécifiques en fonction des arguments passés.
Voici un exemple de code Sass qui définit un Mixin pour générer une bordure arrondie pour les éléments de forme rectangulaire :
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.rectangle {
@include border-radius(5px);
}
Dans cet exemple, nous avons défini un Mixin nommé border-radius qui prend un argument $radius et définit les propriétés de bordure, puis nous l’incluons dans la classe .rectangle en utilisant @include pour donner à cette classe une bordure arrondie de 5 pixels.
En utilisant ce Mixin, nous pouvons facilement donner une bordure arrondie à d’autres éléments en incluant simplement le Mixin dans leur classe.
Par exemple :
.circle {
@include border-radius(50%);
}.square {
@include border-radius(3px) background-color: yellow;
}
Quelle différence fondamentale entre les fonctions et les mixins ?
En Sass, les fonctions et les mixins sont toutes les deux utilisées pour encapsuler du code réutilisable, mais elles sont utilisées de manière différente et ont des fonctionnalités différentes.
Les fonctions en Sass ressemblent beaucoup aux fonctions en programmation classique. Elles prennent des paramètres en entrée et retournent une valeur. Les fonctions peuvent être utilisées pour effectuer des calculs ou pour retourner des valeurs prédéfinies.
Les mixins, quant à eux, sont similaires aux fonctions, mais ils permettent de regrouper des déclarations de styles CSS. Les mixins peuvent prendre des paramètres, mais contrairement aux fonctions, ils ne retournent pas de valeur. Au lieu de cela, ils permettent de réutiliser des groupes de propriétés CSS dans différentes règles.
Il est donc possible de résumer cela en disant que les fonctions sont pour les calculs et les valeurs alors que les Mixins sont pour les réutilisations de CSS.
Installation Sass sur votre site ?
Il existe plusieurs manières de mettre en place Sass sur un site web, mais voici les étapes générales pour configurer Sass :
Installation de Sass : Sass est un langage de préprocesseur, donc vous devez l’installer sur votre ordinateur avant de pouvoir l’utiliser. Vous pouvez installer Sass en utilisant un gestionnaire de paquet comme npm ou yarn, ou en utilisant un outil en ligne de commande comme RubyGems.
Création de fichiers Sass : Créez des fichiers Sass en utilisant l’extension .scss pour le système de nommage des fichiers. Notez que lorsque vous créez un fichier scss, les fichiers importants doivent être importés dans l’ordre où ils doivent être compilés.
Compilation de Sass en CSS : Pour utiliser les styles Sass dans un navigateur, vous devez les compiler en CSS. Vous pouvez utiliser l’outil en ligne de commande Sass pour compiler les fichiers Sass en CSS, ou utiliser un outil de build automatisé pour compiler les fichiers automatiquement lorsque des modifications sont apportées. Il existe également des outils en ligne, des plugins pour éditeurs de code ou des plugins pour navigateurs pour compiler les fichiers Sass en CSS.
Intégration des styles compilés dans le site web : Une fois que les fichiers Sass ont été compilés en CSS, vous devez inclure les feuilles de style CSS compilées dans votre site web en utilisant les balises link dans le head de votre document HTML.
Configuration de l’outil de build : Si vous utilisez un outil de build automatisé pour compiler les fichiers Sass en CSS, il est nécessaire de configurer les paramètres de compilation dans le fichier de configuration de l’outil de build, comme indiquer le chemin de fichiers scss ou css de sortie.
Le petit + pour les développeurs débutants
Installation de Sass avec Visual Studio Code (VSC)
Voici un petit plus pour les utilisateurs de VsCode ! Il existe une excellente extension qui va vous permettre d’utiliser Sass simplement, sans l’installer ni même NodeJS.
Cette extension s’appelle Live Sass Compiler.
Pour l’installer, lancez l’onglet “extension” de VsCode.
Puis recherchez l’extension Live Sass Compiler et installez-là.
Il existe de nombreux outils et configurations différents pour mettre en place Sass sur un site web, ces étapes peuvent varier en fonction de vos besoins et de la méthode choisie pour l’intégration de Sass sur votre projet. Il est donc important de se familiariser avec les différentes options disponibles pour choisir celle qui convient le mieux à vos besoins et à votre environnement de développement.
Enfin, il est important de savoir que la mise en place de Sass sur un site web peut être plus complexe que pour un projet personnel, en fonction de la taille et de la structure du projet. Il est donc nécessaire de bien planifier et de se familiariser avec les différentes options pour intégrer Sass efficacement dans votre projet.
Conclusion
Sass est un puissant préprocesseur qui permet aux développeurs de faciliter la maintenance et la réutilisation du code CSS en offrant des fonctionnalités comme les variables, les Mixins et les fonctions. Il permet également d’améliorer la lisibilité et la productivité en divisant les feuilles de style en plusieurs fichiers plus petits et en utilisant des méthodes de construction automatisées.
En utilisant Sass, vous pouvez améliorer l’expérience de développement en créant des styles plus propres, organisés et maintenables. Cela vous permettra également de gagner du temps en automatisant certaines tâches répétitives et en simplifiant les processus de modification globale.
En somme, Sass est un outil puissant qui facilite les processus de modification globale. Il est fortement recommandé de l’utiliser dans les projets de développement de site web volumineux et complexe.
Alors , êtes-vous maintenant convaincus que le sass c’est mieux ?
Thierry – MultiverseConcept.com