Qu'est-ce que Sass?

Sass, une extension de CSS, est un acronyme pour une feuille de style syntaxiquement géniale. Sass est essentiellement un pré-processeur de CSS qui fonctionne bien avec toutes les versions de CSS et améliore la capacité de la langue de base. Il est bien connu pour gagner beaucoup de temps et d'efforts en empêchant ses utilisateurs d'utiliser des valeurs CSS redondantes. Cet article souligne donc l'importance de SASS pour saisir plus de connaissances à son sujet, lisez l'intégralité de l'article.

Contexte de Sass

Syntacticalement Awesome Stylesheet (SASS) a été créé à l'origine par Hampton Catlin et étendu par Natalie Weizenbaum en 2006. Plus tard, Natalie Weizenbaum avec Chris Eppstein a étendu la version originale à SassScript qui est un langage de script utilisé dans les fichiers SASS.

Caractéristiques du SASS

Certaines caractéristiques distinctives de SASS sont répertoriées ci-dessous.

1. SASS est une extension CSS basée sur JS.
2. Sass travaille en harmonie avec toutes les versions de CSS.
3. Il a plus de potentialité et de stabilité par rapport à CSS.
4. La syntaxe de SASS se compile en CSS lisible.
5. Il s'agit d'un préprocesseur open source qui est traduit en CSS.
6. Il soutient l'utilisation des variables, de la nidification, des mixins, etc.
7. Il fournit des directives de contrôle pour les bibliothèques et de nombreuses fonctions utiles pour diverses valeurs.
8. Les fichiers SASS ont un .Extension SCSS.
9. Commentaire dans SASS est similaire à CSS. Vous pouvez commenter dans le code SASS en utilisant soit / * * /, ou //.
10. La sortie de SASS est entièrement structurée et peut être personnalisée.

Prérequis de SASS

Dans le but de comprendre Sass d'une meilleure manière, vous devez avoir une bonne compréhension des éléments suivants.

1. Html
2. CSS

Quelle est l'importance de Sass

La signification de Sass peut être mise en évidence par le fait que les feuilles de style SICE peuvent être difficiles à gérer en raison de leur taille et de leur complexité, par conséquent, Sass vous permet de structurer vos feuilles de style plus rapidement. Il permet l'utilisation de variables, de nidification, de mixins, d'héritage, d'importations, de fonctions, etc.

Comment fonctionne SASS

SASS utilise un pré-processeur pour convertir le code en code CSS lisible car le code SASS n'est pas compréhensible par le navigateur Web. Cette procédure de conversion d'un code SASS en CSS est appelée transpiling et le pré-processeur exécutant cette fonction est appelé transpiler.

Exemple de SASS

Pour comprendre le fonctionnement de SASS, suivez l'exemple présenté ci-dessous.

Scénario
Supposons que le site Web que vous développez utilise seulement deux types de familles de polices pour le texte apparaissant sur les pages Web. Maintenant, au lieu d'écrire les noms de famille de polices encore et encore, vous pouvez créer des variables SASS et leur attribuer des valeurs. Par la suite, vous pouvez utiliser les noms de ces variables n'importe où dans votre fichier de code source. Voici comment tu fais.

$ Family_1: Times New Roman;
$ Family_2: Verdana;
.H1
Font-Family: $ Family_2;

.p
Font-Family: $ Family_1;

.bas de page
Font-Family: $ Family_1;

Dans le code ci-dessus, nous avons d'abord déclaré deux variables SASS et leur avons attribué les valeurs souhaitées. Maintenant, nous utilisons ces variables dans notre feuille de style pour styliser nos différents éléments. Vous pouvez générer des variables SASS de la même manière pour d'autres valeurs telles que la couleur, le dimensionnement, etc.

Conclusion

Syntacticalement Awesome Stylesheet (SASS) est une extension de CSS. Il s'agit essentiellement d'un pré-processeur de CSS qui fonctionne bien avec toutes ses versions et améliore la capacité de la langue de base. Il économise beaucoup de temps et d'efforts en empêchant ses utilisateurs d'utiliser des valeurs CSS redondantes. De plus, il vous permet de structurer vos feuilles de style plus rapidement. Cet article traite de Sass en détail, mettant en évidence sa signification avec ses caractéristiques distinctives et bien plus encore.