Qu'est-ce que Sass? Apprenez à utiliser ce langage d'extension CSS

Les feuilles de style syntaxiquement impressionnantes (Sass) sont un langage d'extension CSS populaire. La langue existe depuis environ 15 ans. Il fonctionne bien avec toutes les versions de CSS, ce qui le rend compatible avec toutes les bibliothèques et frameworks CSS, de Bootstrap à Foundation.

Le langage vous permet d'écrire du code Sass, puis de compiler ce code en CSS. L'intérêt d'utiliser Sass au lieu de CSS simple est qu'il fournit des fonctionnalités supplémentaires qui sont actuellement en dehors du champ d'application de CSS.

Dans ce didacticiel, vous apprendrez à utiliser Sass et ses fonctionnalités les plus importantes.

Installer Sass

Il existe plusieurs façons d'utiliser Sass sur votre appareil. Ceux-ci incluent l'exécution d'une application (telle que LiveReload ou Scout-App), le téléchargement Sass de GitHub, ou l'installer en utilisant npm.

Installer Sass avec npm

Pour installer Sass à l'aide de npm, vous devez installer NodeJS et npm sur votre appareil. Ensuite, vous devrez créer un

package.json fichier (ce qui est une bonne pratique lors de l'installation de n'importe quel package npm dans vos projets). Vous pouvez créer une base package.json fichier dans votre répertoire de projet avec la commande de terminal suivante :

npm init -y

L'exécution de cette commande générera un fichier package.json avec le contenu suivant :

{
 "nom": "mon_application",
 "version": "1.0.0",
 "la description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Erreur: aucun test spécifié\" && exit 1"
 },
 "mots clés": [],
 "auteur": "",
 "licence": "ISC"
}

le package.json est important car il sert de configuration pour votre projet. Chaque fois que vous installez un nouveau package npm, le package.json le fichier reflétera cela.

Vous pouvez maintenant installer Sass en insérant la commande suivante dans votre terminal :

npm installer sass

Cette commande mettra à jour le package.json fichier en créant un nouveau champ de dépendance, qui contiendra le nouveau package Sass. Cela générera également une nouvelle package-lock.json fichier et installez sass (plus les dépendances) dans un node_modules annuaire.

Les différents types de fichiers Sass

Un fichier Sass peut avoir l'une des deux extensions, .toupet ou .scss. La principale différence entre eux est que le .scss utilise des accolades et des points-virgules (un peu comme CSS), tandis que le .toupet structures de fichiers CSS utilisant l'indentation (un peu comme Python). Certains développeurs préfèrent utiliser le .scss fichier car sa structure est plus proche de CSS.

Un exemple de fichier .scss

$primary-color: bleu ;
corps {
 couleur: $couleur-primaire ;
 p {
 La couleur rouge;
 }
}

Un exemple de fichier .sass

$primary-color: bleu
corps
 couleur: $primary-color
 p
 La couleur rouge

Compiler un fichier Sass en CSS

Vous pouvez compiler un fichier Sass individuel en utilisant le toupet programme en ligne de commande :

sass fichier.scss > fichier.css

Vous pouvez également exécuter sass sur tous les fichiers d'un répertoire spécifique :

sass scss: dist/css/

Cette commande compile tous les fichiers Sass dans le scss répertoire et stocke les fichiers résultants dans dist/css.

Si vous utilisez npm, vous pouvez configurer un raccourci pratique pour la compilation sass en utilisant le scénarios champ dans votre package.json fichier:

"scripts": {
 "test": "echo \"Erreur: aucun test spécifié\" && exit 1",
 "sass": "sass --watch scss: dist/css/"
 },

Cette configuration utilise le --Regardez option. Il maintient sass en cours d'exécution et s'assure qu'il recompile ces fichiers chaque fois qu'ils changent. Pour chaque fichier, sass générera un .css et un .css.map fichier.

Pour exécuter le script Sass ci-dessus, vous devrez exécuter la commande suivante dans votre terminal :

npm exécuter sass

L'exécution de cette commande générera une sortie semblable à celle-ci :

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Compilation scss\main.scss vers dist\css\main.css.
Sass surveille les changements. Appuyez sur Ctrl-C pour arrêter.

Variables Sass

Vous pouvez créer des variables en CSS aujourd'hui, mais il y a 15 ans, les variables CSS n'existaient pas, donc leur prise en charge par Sass était précieuse. Les variables Sass fonctionnent à peu près de la même manière que les variables CSS. Ils stockent les valeurs (telles que les couleurs) que vous avez l'intention d'utiliser dans un fichier CSS. L'un des principaux avantages des variables est qu'elles vous permettent de mettre à jour de nombreuses occurrences d'une valeur en la modifiant à un seul endroit.

Chaque variable Sass commence par le signe dollar, suivi de n'importe quelle combinaison de caractères. Essayez de rendre vos variables descriptives, comme le $couleur-primaire exemple ci-dessus. Il est important de noter qu'une variable Sass ne se compile pas en variables CSS. Par exemple, ce fichier .scss :

$primary-color: bleu ;
corps {
 couleur: $couleur-primaire ;
}

Compilera vers le CSS suivant :

corps {
 Couleur bleue;
}

Comme vous pouvez le voir dans le fichier ci-dessus, il n'y a pas de variables CSS. L'avantage des variables est que toute modification apportée au fichier Sass mettra à jour le fichier CSS correspondant.

Sass Mixins

Si vous avez une propriété que vous souhaitez utiliser plusieurs fois tout au long de votre projet, une variable est idéale. Mais si vous avez un groupe de propriétés que vous souhaitez utiliser comme une unité, un mixin fera l'affaire.

Chaque mixin commence par le @mixin mot-clé, suivi du nom que vous souhaitez attribuer au mixin. Vous avez la possibilité de transmettre des variables au mixin en tant que paramètres et d'utiliser ces variables dans le corps du mixin, à peu près de la même manière qu'une fonction.

Utiliser un mixin

@mixin light-theme($primary-color: blanc, $secondary-color: #2c2c2c) {
 famille de polices: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans empattement ;
 couleur d'arrière-plan: $couleur-primaire ;
 couleur: $secondaire-couleur ;
}
#domicile {
 @include light-theme (bleu);
}

La première chose que vous remarquerez peut-être dans le code ci-dessus est que le mixin accepte deux arguments. Vous pouvez affecter des valeurs par défaut aux arguments et les remplacer lorsque vous les incluez.

Après avoir créé votre mixin, vous pouvez l'utiliser dans n'importe quelle section de votre site Web en utilisant le @inclure mot clé suivi du nom du mixin.

La compilation du code Sass ci-dessus générera le code CSS suivant dans votre fichier de destination :

#domicile {
 famille de polices: "Franklin Gothic Medium", "Arial Narrow", Arial, sans empattement ;
 couleur de fond: bleu ;
 couleur: #2c2c2c ;
}

Fonctions Sass

Outre les différents mots-clés, la principale différence entre une fonction et un mixin est qu'une fonction doit retourner quelque chose. Vous pouvez utiliser les fonctions Sass pour calculer des valeurs ou effectuer des opérations.

@function add-numbers($num-un, $num-deux){
 $somme: 0 ;
 $somme: $num-un + $num-deux ;
 @retour $somme 
}

Cette fonction ci-dessus accepte deux nombres et renvoie leur somme. Les fonctions Sass peuvent même contenir des instructions if, des boucles for et d'autres instructions de flux de contrôle.

Modules Sass

Si vous deviez inclure toutes vos variables, mixins et fonctions dans le même fichier, vous auriez un énorme fichier Sass lors de la création de grandes applications. Les modules fournissent un moyen de diviser des fichiers volumineux en fichiers plus petits que Sass combine lors de la compilation. Par exemple, vous pouvez avoir un module de fonction et un module de mixin, tout ce dont vous devez vous souvenir est le @utiliser mot-clé.

Voici un exemple montrant comment vous pouvez séparer le mixin précédent dans son propre fichier :

Le fichier mixins.scss

@mixin light-theme($primary-color: blanc, $secondary-color: #2c2c2c) {
 famille de polices: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans empattement ;
 couleur d'arrière-plan: $couleur-primaire ;
 couleur: $secondaire-couleur ;
}

Le fichier main.scss

@use 'mixins';
#domicile{
 @include mixins.light-theme;
}

Pour importer et utiliser un fichier externe en tant que module, vous devez utiliser le @utiliser mot-clé pour l'importer. Ensuite, pour utiliser un mixin spécifique du fichier importé, préfixez le nom du mixin spécifique avec le nom du fichier suivi d'un point. La compilation des fichiers ci-dessus générera le code CSS suivant :

#domicile {
 famille de polices: "Franklin Gothic Medium", "Arial Narrow", Arial, sans empattement ;
 couleur de fond: blanc ;
 couleur: #2c2c2c ;
}

Utilisez Sass pour étendre et organiser votre CSS

Sass est une extension de la syntaxe CSS. Il vous permet de rationaliser vos feuilles de style et de les gérer plus efficacement. Mais vous aurez toujours besoin de maîtriser les principes CSS et de conception Web pour créer des conceptions efficaces.

Cet article vous apprend à installer et à utiliser Sass. Vous avez appris à créer des variables, des mixins, des fonctions et des modules Sass. Il ne vous reste plus qu'à créer un document HTML et à regarder votre code Sass prendre vie.

8 trucs et astuces CSS essentiels que tout développeur devrait connaître

Lire la suite

A propos de l'auteur