SASS (Syntactically Awesome Stylesheet) est un pré-processeur CSS qui permet de réduire les répétitions avec CSS et de gagner du temps. Il s'agit d'un langage d'extension CSS plus stable et plus puissant qui décrit le style du document de manière claire et structurelle.
C'est un langage de prétraitement qui fournit une syntaxe indentée (sa propre syntaxe) pour CSS.
Il permet d'écrire du code plus efficacement et plus facilement à maintenir.
C'est un super ensemble de CSS qui contient toutes les fonctionnalités de CSS et est un pré-processeur open source, codé en Ruby.
Il fournit un style de document dans un bon format de structure que le CSS plat.
Il utilise des méthodes réutilisables, des instructions logiques et certaines des fonctions intégrées telles que la manipulation des couleurs, les mathématiques et les listes de paramètres.
Il est plus stable, puissant et compatible avec les versions de CSS.
C'est un super ensemble de CSS et est basé sur le JavaScript.
Il est connu sous le nom de sucre syntaxique pour CSS, ce qui signifie qu'il permet à l'utilisateur de lire ou d'exprimer plus clairement les choses.
Il utilise sa propre syntaxe et se compile en CSS lisible.
Vous pouvez facilement écrire du CSS en moins de code en moins de temps.
C'est un pré-processeur open source qui est interprété en CSS.
Il permet d'écrire du CSS propre dans une construction de programmation.
Cela aide à écrire du CSS plus rapidement.
C'est un sur-ensemble de CSS qui aide les concepteurs et les développeurs à travailler plus efficacement et plus rapidement.
Comme Sass est compatible avec toutes les versions de CSS, nous pouvons utiliser toutes les bibliothèques CSS disponibles.
Il est possible d'utiliser une syntaxe imbriquée et des fonctions utiles telles que la manipulation des couleurs, les mathématiques et d'autres valeurs.
Il faut du temps au développeur pour apprendre les nouvelles fonctionnalités présentes dans ce pré-processeur.
Si plus de personnes travaillent sur le même site, elles utiliseront le même préprocesseur. Certaines personnes utilisent le Sass et d'autres utilisent le CSS pour éditer directement les fichiers. Il deviendra donc difficile de travailler avec le site.
Il y a des chances de perdre les avantages de l'inspecteur d'éléments intégré du navigateur.
SASS prend en charge deux syntaxes à savoir SCSS et Indented syntaxe.
le SCSS (Sassy CSS)est une extension de la syntaxe CSS qui facilite la gestion de grandes feuilles de style et peut reconnaître la syntaxe spécifique du fournisseur et de nombreux CSS. Les fichiers SCSS utilisent l'extension.scss.
le Indented est une syntaxe plus ancienne et parfois simplement appelée Sass. En utilisant cette forme de syntaxe, CSS peut être écrit de manière concise. Les fichiers SASS utilisent l'extension.sass.
Vous pouvez utiliser SASS de trois manières différentes -
En tant qu'outil de ligne de commande
En tant que module Ruby
En tant que plugin pour le framework d'activation de rack
L'imbrication est la combinaison de différentes structures logiques. En utilisant SASS, nous pouvons combiner plusieurs règles CSS les unes dans les autres. Si vous utilisez plusieurs sélecteurs, vous pouvez utiliser un sélecteur dans un autre pour créer des sélecteurs composés.
Vous pouvez sélectionner le sélecteur parent en utilisant le &personnage. Il indique où le sélecteur parent doit être inséré.
SASS prend en charge le sélecteur d'espace réservé à l' aide du sélecteur de classe ou d' identifiant . En CSS normal, ceux-ci sont spécifiés avec "#" ou ".", mais dans SASS, ils sont remplacés par"%".
Il existe 5 types d'opérations -
Opérations numériques
Opérations de couleur
Opérations de chaîne
Opérations booléennes
Opérations de liste
Il permet des opérations mathématiques telles que l'addition, la soustraction, la multiplication et la division.
Il permet d'utiliser des composants de couleur avec des opérations arithmétiques.
Les listes représentent des séries de valeurs séparées par des virgules ou des espaces.
Vous pouvez effectuer des opérations booléennes sur le script Sass en utilisant les opérateurs and, or and not.
Les parenthèses sont des paires de signes généralement délimités par des crochets ronds () ou des crochets [] qui fournissent une logique symbolique qui affecte l'ordre des opérations.
Il fournit des variables SassScript dans les sélecteurs et les noms de propriétés en utilisant #{ }syntaxe. Vous pouvez spécifier des variables ou des noms de propriétés entre accolades.
Vous pouvez définir des valeurs par défaut pour les variables en ajoutant l' indicateur ! Default à la fin de la valeur de la variable. Il ne réassignera pas la valeur, si elle est déjà affectée à la variable.
Il prend directement le nom de fichier à importer et tous les fichiers importés seront combinés dans un seul fichier CSS.
Il définit la règle de style pour différents types de médias.
Il est utilisé pour partager des règles et des relations entre les sélecteurs. Il peut étendre tous les autres styles de classe dans une classe et peut également appliquer ses propres styles spécifiques.
C'est une collection de règles imbriquées qui est capable de créer un bloc de style à la racine du document.
Il est utilisé pour exécuter de manière sélective les instructions de code en fonction du résultat de l'évaluation d'une expression.
Les instructions @else if sont utilisées avec la directive @if, chaque fois que l'instruction @if échoue, les instructions @else if sont essayées et si elles échouent également, @else est exécutée.
Il vous permet de générer des styles dans une boucle. La variable de compteur est utilisée pour définir la sortie pour chaque itération.
Dans la directive @each, une variable est définie qui contient la valeur de chaque élément d'une liste.
Il est utilisé pour définir les mixins qui incluent éventuellement les variables et l'argument après le nom du mixin.
Il est utilisé pour inclure le mixin dans le document et les styles définis par le mixin peuvent être inclus dans la règle courante.
Les valeurs SassScript peuvent être prises comme arguments dans les mixins qui sont donnés lorsque mixin est include et sont disponibles comme variables dans le mixin.
Il existe deux types d'arguments mixin -
Arguments de mots clés
Arguments de variable
Il est utilisé pour inclure des arguments dans les mixins. Les arguments nommés peuvent être passés dans n'importe quel ordre et les valeurs par défaut de l'argument peuvent être omises.
Les arguments variables sont utilisés pour passer n'importe quel nombre d'arguments à mixin. Il contient des arguments de mots clés passés à la fonction ou à mixin.
En utilisant la directive de fonction, vous pouvez créer votre propre fonction et les utiliser dans votre contexte de script ou peut être utilisée avec n'importe quelle valeur.
Le fichier CSS généré par le SASS se compose du style CSS par défaut qui reflète la structure du document. Le style CSS par défaut est bon mais peut ne pas convenir à toutes les situations.
Le style imbriqué est le style par défaut de SASS. Cette façon de styliser est très utile lorsque vous traitez de gros fichiers CSS.
Dans le style de sortie étendu, chaque propriété et règle a sa propre ligne. Cela prend plus de place que le style CSS imbriqué.
Le style CSS compact prend moins de place de manière compétitive que Expanded et Nested. Il se concentre principalement sur les sélecteurs plutôt que sur ses propriétés.
Le style CSS compressé prend moins d'espace par rapport à tous les autres styles. Il fournit des espaces uniquement pour séparer les sélecteurs et le retour à la ligne à la fin du fichier.
Il utilise l' indentation plutôt que{ et } pour délimiter des blocs.
Pour séparer les instructions, il utilise des retours à la ligne au lieu de points - virgules (;) .
La déclaration de propriété et les sélecteurs doivent être placés sur sa propre ligne et les déclarations dans{ et }doit être placé sur une nouvelle ligne et en retrait .
Il utilise l' indentation plutôt que{ et } pour délimiter des blocs.
Pour séparer les instructions, il utilise des retours à la ligne au lieu de points - virgules (;) .
La déclaration de propriété et les sélecteurs doivent être placés sur sa propre ligne et les déclarations dans{ et }doit être placé sur une nouvelle ligne et en retrait .
Les propriétés CSS peuvent être déclarées de deux manières -
Les propriétés peuvent être déclarées similaires à CSS mais sans semicolon(;).
colon(:) sera préfixé à chaque nom de propriété.
Vous pouvez utiliser = pour la directive @mixin et + pour la directive @include, ce qui nécessite moins de frappe et rend votre code plus simple et plus facile à lire.
sass --watch C: \ ruby \ lib \ sass \ style.scss: style.css
Les commentaires occupent une ligne entière et entourent tout le texte imbriqué sous eux et ils sont basés sur des lignes dans une syntaxe indentée.
sass input.scss output.css
Il vérifie d'abord l'octet Unicode, la prochaine déclaration @charset , puis l'encodage de la chaîne Ruby.
Ensuite, si rien n'est défini, il considère le codage de jeu de caractères comme UTF-8 .
Déterminez explicitement le codage des caractères à l'aide de la déclaration @charset . Utilisez simplement "@charset encoding name" au début de la feuille de style et SASS supposera qu'il s'agit du codage de caractères donné.
Si le fichier de sortie de SASS contient des caractères non ASCII, il utilisera la déclaration @charset .
Sass prend en charge deux types de commentaires -
Multiline comments- Ceux-ci sont écrits en utilisant / * et * /. Les commentaires multilignes sont conservés dans la sortie CSS.
Single line comments - Ceux-ci sont écrits en utilisant //suivi de commentaires. les commentaires sur une seule ligne ne sont pas conservés dans la sortie CSS.
Il évalue l'expression SassScript en utilisant la ligne de commande. Vous pouvez exécuter le shell avec la ligne de commande sass avec l' option -i .
Il détecte les erreurs et affiche les valeurs de l'expression SassScript dans le flux de sortie d'erreur standard.
Il affiche la valeur de l'expression SassScript comme erreur fatale.