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

Les feuilles de style syntaxiquement exceptionnelles (Sass) sont un langage d’extension CSS de premier plan. La langue est en fait présente depuis environ 15 ans. Il fonctionne bien avec toutes les variantes de CSS, ce qui le rend adapté à toutes les bibliothèques CSS ainsi qu’à toutes les structures, de Bootstrap à Foundation.

Le langage vous permet de créer du code Sass et ensuite d’assembler ce code en CSS. L’avantage d’utiliser Sass plutôt que le CSS ordinaire est qu’il offre des fonctionnalités supplémentaires qui sont actuellement en dehors de la gamme CSS.

Dans ce didacticiel, vous découvrirez exactement comment utiliser Sass ainsi que ses attributs les plus importants.

Installer Sass

Il existe plusieurs méthodes pour utiliser Sass sur votre gadget. Celles-ci consistent à exécuter une application (telle que LiveReload ou Scout-App), à télécharger Sass de GitHub ou en le montant à l’aide de npm.

Installer Sass avec npm

Pour installer Sass à l’aide de npm, vous devrez installer NodeJS et également npm sur votre outil. Après cela, vous devrez développer un emballer. json documents (ce qui est une excellente pratique lors de l’installation de n’importe quel package npm dans vos travaux). Vous pouvez créer une base emballer. json documents dans votre site de répertoire de tâches avec la commande de terminal suivante :

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

le emballer. json Le fichier est important car il fonctionne comme un arrangement pour votre projet. Chaque fois que vous installez un nouveau package npm, le emballer. json le fichier le montrera.

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

Cette commande mettra à jour le emballer. json documents en produisant un tout nouveau champ de dépendance , qui aura certainement le tout nouveau package Sass. Cela générera certainement en outre un tout nouveau package-lock.json données ainsi que configurer sass (plus les dépendances) directement dans un nœud _ modules annuaire.

Les différents types de fichiers Sass

Un fichier Sass peut avoir quelques extensions, . toupet ou . scss . La principale différence entre eux est que le . scss utilise des accolades ainsi que des points-virgules (un peu comme CSS), tandis que le . toupet soumettre des structures CSS utilisant l’empreinte (tout comme Python). Certains programmeurs choisissent d’utiliser le . scss fichier car son cadre est plus détaillé en CSS.

A. Exemple de fichier scss

A. exemple de fichier sass

Compiler un fichier Sass en CSS

Vous pouvez compiler un document Sass spécifique en utilisant le toupet programme en ligne de commande :

Vous pouvez également exécuter sass sur toutes les données d’un site de répertoire particulier :

Cette commande rassemble toutes les données Sass dans le scss répertoire et stocke les données résultantes dans dist/css .

Si vous utilisez npm, vous pouvez mettre en place un moyen pratique plus rapide pour la collecte sass en utilisant le scénarios zone dans votre emballer. json Les données:

Cette configuration utilise le — Regardez alternative. Il maintient le fonctionnement de Sass et s’assure qu’il recompile ces documents chaque fois qu’ils sont modifiés. Pour chaque document, sass générera un . CSS et un . css.map documents.

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

L’exécution de cette commande produira une sortie comparable à ceci :

Variables Sass

Vous pouvez développer des variables en CSS aujourd’hui, mais il y a 15 ans, les variables CSS n’existaient pas, donc l’assistance de Sass pour elles était précieuse. Les variables Sass fonctionnent à peu près de la même manière que les variables CSS. Ils enregistrent des valeurs (telles que des couleurs) que vous avez l’intention d’utiliser dans une donnée CSS. L’un des principaux avantages des variables est qu’elles vous permettent de mettre à jour de nombreuses occurrences d’une valeur en la transformant en un seul endroit.

Chaque variable Sass commence par l’indication buck, respectée par n’importe quelle combinaison de personnalités. Essayez de rendre vos variables descriptives, comme le $ couleur primaire exemple terminé. Il est important de garder à l’esprit qu’une variable Sass ne s’assemble pas en variables CSS. Par exemple, les documents this.scss :

Compilera vers le CSS conforme :

Comme vous pouvez le voir dans les documents ci-dessus, il n’y a pas de variables CSS. L’avantage des variables est que toute modification apportée au fichier Sass mettra certainement à jour les données CSS correspondantes.

Sass Mixins

Si vous avez un bâtiment que vous souhaitez utiliser plusieurs fois tout au long de votre tâche, une variable est idéale. Cependant, si vous avez un groupe de maisons que vous souhaitez utiliser comme appareil, un mixin suffira.

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

Utiliser un mixin

Le premier point que vous avez pu remarquer dans le code ci-dessus est que le mixin accepte deux arguments. Vous pouvez attribuer des valeurs par défaut aux débats et les ignorer lorsque vous les incluez.

Après avoir produit votre mixin, vous pouvez l’utiliser dans n’importe quel type de section de votre site Web en utilisant le @inclure mot-clé respecté par le nom du mixin.

Compiler le code Sass ci-dessus générera certainement le code CSS conforme dans votre fichier de destination :

Fonctions Sass

Outre les différents mots clés, la principale différence entre une fonction et un mixin est qu’une fonction doit renvoyer quelque chose. Vous pouvez utiliser les fonctions Sass pour déterminer des valeurs ou effectuer des procédures.

Cette fonctionnalité accepte plus de 2 numéros et renvoie leur montant. Les fonctions Sass peuvent même inclure des déclarations if, des boucles for, ainsi que d’autres déclarations de circulation de contrôle.

Modules Sass

Si vous deviez inclure toutes vos variables, mixins et fonctions dans les mêmes données, vous auriez un énorme document Sass lors du développement d’applications volumineuses. Les composants fournissent une méthode pour diviser les fichiers volumineux en fichiers de plus petite taille qui se combinent tout au long de la compilation. Par exemple, vous pouvez avoir un module de fonction ainsi qu’un composant mixin, tout ce que vous devez garder à l’esprit est le @utiliser expression de recherche.

Voici un exemple montrant comment vous pouvez diviser le mixin précédent en ses propres données :

Le fichier mixins.scss

Le fichier main.scss

Pour importer et utiliser un document extérieur en tant que composant, vous devez utiliser le @utiliser mot-clé pour l’importer. Ensuite, pour utiliser un mixin de détails du fichier importé, préfixez le nom du mixin spécifique avec le nom de la donnée suivi d’un point. L’assemblage des données générera le code CSS adhérent :

Utilisez Sass pour étendre et organiser votre CSS

Sass est une extension de la structure de phrase de CSS. Il vous permet de simplifier vos feuilles de style et de les gérer plus efficacement. Mais vous aurez toujours besoin de maîtriser les concepts CSS et de conception de sites Web pour créer des styles fiables.

Cet article vous explique exactement comment installer et utiliser Sass. Vous avez appris à créer des variables Sass, des mixins, des fonctionnalités et également des composants. Il ne vous reste plus qu’à produire un fichier HTML et à voir votre code Sass prendre vie.