Sass - Guide rapide

Qu'est-ce que SASS?

SASS (Syntactically Awesome Stylesheet) est un pré-processeur CSS, qui aide à réduire la répétition avec CSS et fait gagner du temps. C'est un langage d'extension CSS plus stable et plus puissant qui décrit le style d'un document de manière propre et structurelle.

Il a été initialement conçu par Hampton Catlin et développé par Natalie Weizenbaum en 2006. Plus tard, Weizenbaum et Chris Eppstein a utilisé sa version initiale pour étendre le Sass avec SassScript.

Pourquoi utiliser SASS?

C'est un langage de prétraitement qui fournit une syntaxe indentée (sa propre syntaxe) pour CSS.
Il fournit certaines fonctionnalités, qui sont utilisées pour créer des feuilles de style qui permettent d'écrire du code plus efficacement et sont faciles à maintenir.
C'est un super ensemble de CSS, ce qui signifie qu'il contient toutes les fonctionnalités de CSS et est un pré-processeur open source, codé en Ruby.
Il fournit le style de document dans un bon format structuré 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.

Caractéristiques de SASS

Il est plus stable, puissant et compatible avec les versions de CSS.
Il s'agit d'un super ensemble de CSS basé sur 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.

Avantages du SASS

Il permet d'écrire du CSS propre dans une construction de programmation.
Cela aide à écrire rapidement du CSS.
Il s'agit d'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.

Inconvénients du SASS

Il faut du temps à un développeur pour apprendre les nouvelles fonctionnalités présentes dans ce pré-processeur.
Si de nombreuses personnes travaillent sur le même site, elles doivent utiliser le même préprocesseur. Certaines personnes utilisent Sass et certaines personnes utilisent CSS pour éditer les fichiers directement. Par conséquent, il devient difficile de travailler sur le site.
Il y a des chances de perdre les avantages de l'inspecteur d'éléments intégré du navigateur.

Dans ce chapitre, nous allons apprendre la procédure pas à pas pour installer Ruby, qui est utilisée pour exécuter les fichiers SASS.

Configuration système requise pour SASS

Operating System - Multiplateforme
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
Programming Language - Rubis

Installation de Ruby

Step 1 - Ouvrez le lien https://www.ruby-lang.org/en/downloads/, vous verrez un écran comme indiqué ci-dessous -

Téléchargez la version stable actuelle du fichier zip.

Step 2 - Ensuite, exécutez la configuration pour installer Ruby sur le système.

Step 3- Ensuite, ajoutez le dossier Ruby bin à votre variable utilisateur PATH et à votre variable système pour travailler avec la commande gem.

Path User Variable -

Faites un clic droit sur My Computer icône.
Sélectionner Properties.
Ensuite, cliquez sur le Advanced onglet et cliquez Environment Variables.

Dans la fenêtre Variables d'environnement , double-cliquez sur le PATH comme indiqué dans la capture d'écran ci-dessous -

Vous obtiendrez une boîte de dialogue Modifier la variable utilisateur comme indiqué. Ajoutez le chemin du dossier ruby bin dans le champ Valeur de la variable commeC:\Ruby\bin. Si le chemin est déjà défini pour d'autres fichiers, placez un point-virgule après cela et ajoutez le chemin du dossier Ruby comme indiqué ci-dessous.

Clique le OK bouton.

System Variable -

Clique le New bouton.

Ensuite, le New System Variable bloc s'affiche comme illustré ci-dessous.

Entrer RubyOptdans le champ Nom de la variable etrubygemsdans le champ Valeur de la variable . Après avoir écrit le nom et la valeur de la variable , cliquez sur le boutonOK bouton.

Step 4 - Ouvrez l'invite de commande dans votre système et entrez la ligne suivante -

gem install sass

Step 5 - Ensuite, vous verrez l'écran suivant après avoir installé SASS avec succès.

Exemple

Ce qui suit est un exemple simple de SASS.

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

Maintenant, nous allons créer un fichier en tant que style.scss , qui est assez similaire à CSS et la seule différence est qu'il sera enregistré avec l'extension .scss. Les fichiers .htm et .scss doivent être créés dans le dossierruby. Vous pouvez enregistrer votre fichier .scss dans le dossierruby\lib\sass\ (avant ce processus, créez un dossier comme sass dans le répertoire lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Lorsque vous exécutez la commande ci-dessus, elle crée automatiquement le fichier style.css . Chaque fois que vous modifiez le fichier SCSS, le fichier style.css sera mis à jour automatiquement.

Le fichier style.css aura le code suivant lorsque vous exécuterez la commande donnée ci-dessus -

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code ci-dessus dans hello.html fichier.
Ouvrez ce fichier HTML dans un navigateur.

Dans ce chapitre, nous étudierons le SASS Syntax. SASS prend en charge deux syntaxes à savoirSCSS et Indented syntax.

le SCSS (Sassy CSS)est une extension de la syntaxe CSS. Cela signifie que chaque CSS valide est également un SCSS valide. SCSS facilite beaucoup la gestion des feuilles de style volumineuses et peut reconnaître la syntaxe spécifique du fournisseur, de nombreux fichiers CSS et SCSS utilisent l'extension.scss.
Indented - C'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.

Syntaxe indentée SASS

La syntaxe SASS indentée ou simplement SASS est une alternative à la syntaxe SCSS basée sur CSS.

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 .

Par exemple, considérez le code SCSS suivant -

.myclass {
   color = red;
   font-size = 0.2em;
}

le indentedLa syntaxe est une syntaxe plus ancienne, qui n'est pas recommandée pour une utilisation dans les nouveaux fichiers Sass. Si vous utilisez ce fichier, il affichera une erreur dans le fichier CSS comme nous l'avons utilisé= au lieu de pour définir les propriétés et les variables.

Compilez le code ci-dessus en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ensuite, exécutez la commande ci-dessus; il affichera une erreur dans le fichier style.css comme indiqué ci-dessous -

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Différences de syntaxe de SASS

La plupart des syntaxes CSS et SCSS fonctionnent parfaitement dans SASS. Cependant, il existe certaines différences, qui sont expliquées dans les sections suivantes -

Syntaxe de propriété

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é.

Par exemple, vous pouvez écrire comme -

.myclass
   :color red
   :font-size 0.2em

Les deux méthodes ci-dessus (déclaration de propriétés sans point-virgule et deux-points préfixés au nom de la propriété) peuvent être utilisées, par défaut. Cependant, une seule syntaxe de propriété est autorisée à spécifier lorsque vous utilisez l' option : property_syntax .

Sélecteurs multilignes

Dans la syntaxe indentée, les sélecteurs peuvent être placés sur une nouvelle ligne chaque fois qu'ils apparaissent après commas.

Exemple

L'exemple suivant décrit l'utilisation de sélecteurs multilignes dans le fichier SCSS -

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

Ensuite, créez le fichier style.scss . Notez l' extension .scss .

style.scss

.class1,
.class2{
   color:red;
}

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ensuite, exécutez la commande ci-dessus, elle créera automatiquement le fichier style.css avec le code suivant -

Le style.css généré est comme indiqué ci-dessous -

style.css

.class1,
.class2 {
   color: red;
}

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans le fichier multiline_selectors .html.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

commentaires

Les commentaires occupent une ligne entière et entourent tout le texte imbriqué en dessous. Ils sont basés sur des lignes dans une syntaxe indentée. Pour plus d'informations sur les commentaires, reportez-vous à ce lien .

@importer

Dans SASS le @importdirective peut être écrite avec / sans guillemets. Contrairement à SCSS, ils doivent être utilisés avec des guillemets.

Par exemple, dans SCSS, le @import directive peut être utilisée comme -

@import "themes/blackforest";
@import "style.sass";

Cela peut être écrit en SASS comme -

@import themes/blackforest
@import fontstyle.sass

Directives Mixin

SASS prend en charge le raccourci pour les directives comme @mixin et @include. Au lieu de@mixin et @include vous pouvez utiliser = et + caractères, qui nécessitent moins de frappe et rendent votre code plus simple et plus facile à lire.

Par exemple, vous pouvez écrire les directives mixin comme -

=myclass
   font-size: 12px;
p
   +myclass

Le code donné ci-dessus est le même que -

@mixin myclass
   font-size: 12px;
p
   @include myclass

Syntaxe obsolète

SASS prend en charge l'utilisation d'une ancienne syntaxe. Cependant, utiliser cette syntaxe dans SASS estnot recommended. Un avertissement sera affiché si vous utilisez cette syntaxe et il est supprimé dans les versions ultérieures. Certaines des anciennes syntaxes sont présentées dans le tableau suivant.

S. Non.	Opérateur et description
1	= Il a été utilisé à la place de: lors de la définition de variables et de propriétés sur des valeurs de SassScript.
2	\|\|= Il a été utilisé à la place de: chaque fois que vous attribuez une valeur par défaut à une variable.
3	! Au lieu de $,! a été utilisé comme préfixe de variable. La fonctionnalité ne sera pas modifiée lorsqu'elle est utilisée à la place de $.

SASS est plus puissant et stable qui fournit de la puissance au langage de base en utilisant l'extension de CSS. 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

Si vous utilisez SASS sur Windows, vous devez installer Rubypremière. Pour plus d'informations sur l'installation de Ruby, reportez-vous au chapitre Installation de SASS .

Le tableau suivant montre les commandes, qui sont utilisées pour exécuter le code SASS -

S. Non.	Commande et description
1	sass input.scss output.css Il est utilisé pour exécuter le code SASS à partir de la ligne de commande.
2	sass --watch input.scss:output.css Il informe SASS de surveiller le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change.
3	sass --watch app/sass:public/stylesheets Il est utilisé pour surveiller tout le répertoire, si SASS contient de nombreux fichiers dans un répertoire.

Plugin Rack / Rails / Merb

Rackest une interface de serveur Web, qui est utilisée pour développer des applications Web dans Ruby. Pour plus d'informations sur Rack, visitez simplement ce lien .

Vous pouvez activer le SASS dans le Rails 3 version utilisant le environment.rb dossier présent sous le configdossier. Activez le SASS pour les rails 3 en utilisant le code suivant -

config.gem "sass"

Vous pouvez utiliser la ligne suivante pour le Gemfile pour les Rails 3 (et version supérieure), comme -

gem "sass"

Railsest un framework Web open source qui utilise des standards Web tels que JSON, HTML, CSS et JavaScript pour afficher l'interface utilisateur. Pour travailler avec Rails, vous devez avoir une connaissance de base de Ruby et de la programmation orientée objet. En savoir plus sur le framework on Rails ici .

Si vous souhaitez activer le SASS dans Rack application, ajoutez les lignes suivantes à la config.ru fichier, qui est présent dans le répertoire racine de l'application -

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merbest un framework d'application Web, qui offre vitesse et modularité à Rails. Pour en savoir plus sur Merb, ouvrez simplement ce lien .

Vous pouvez activer le SASS dans Merb en ajoutant la ligne suivante au config/dependencies.rb fichier -

dependency "merb-haml"

Mise en cache

SASS met en cache des documents tels que des modèles et des partiels, qui peuvent être réutilisés sans les analyser, sauf s'ils ont été modifiés. Il accélère la compilation des fichiers SASS et fonctionne encore mieux lorsque les modèles sont divisés en fichiers séparés, qui sont tous importés dans un seul gros fichier. Si vous supprimez les fichiers mis en cache, ils seront à nouveau générés lors de la prochaine compilation.

Options

Vous pouvez définir les options dans le fichier environment.rb de Rails ou dans le fichier config.ru de l'application Rack en utilisant la ligne suivante -

Sass::Plugin.options[:style] = :compact

Vous pouvez également définir des options dans le fichier init.rb de Merb en utilisant la ligne suivante -

Merb::Plugin.config[:sass][:style] = :compact

Certaines options sont disponibles avec SASS et SCSS, comme décrit dans le tableau ci-dessous -

S. Non.	Option et description
1	:style Il affiche le style de la sortie.
2	:syntax Vous pouvez utiliser la syntaxe indentée pour sass et la syntaxe d'extension CSS pour scss .
3	:property_syntax Il utilise une syntaxe indentée pour utiliser les propriétés. Si ce n'est pas correct, une erreur sera générée. Par exemple, considérez "background: # F5F5F5" dans lequel background est un nom de propriété et # F5F5F5 est sa valeur de propriété. Vous devez utiliser deux points après le nom de la propriété.
4	:cache Il accélère la compilation des fichiers SASS. Il est défini sur true par défaut.
5	:read_cache Il lit uniquement les fichiers SASS si le cache n'est pas défini et si read_cache est défini.
6	:cache_store Il peut être utilisé pour stocker et accéder au résultat mis en cache en le définissant sur une instance de Sass :: CacheStores :: Base .
sept	:never_update Il ne doit jamais mettre à jour le fichier CSS si les fichiers de modèle changent. Par défaut, il est défini sur false.
8	:always_update Il doit mettre à jour le fichier CSS chaque fois que les fichiers de modèle changent.
9	:always_check Il devrait vérifier les mises à jour chaque fois que le serveur démarre. Il recompilera et écrasera le fichier CSS, s'il y a une mise à jour dans le fichier modèle SASS.
dix	:poll Il utilise le backend d'interrogation pour Sass :: Plugin :: Compiler # watch (qui surveille le modèle et la mise à jour des fichiers CSS) en le définissant sur true.
11	:full_exception Il affiche la description de l'erreur chaque fois qu'une exception se produit dans le code SASS dans le fichier CSS généré. Il affiche un numéro de ligne où une erreur s'est produite avec la source dans le fichier CSS.
12	:template_location Il fournit le chemin du répertoire de modèles dans l'application.
13	:css_location Il fournit le chemin d'accès aux feuilles de style CSS dans l'application.
14	:unix_newlines Il fournit des retours à la ligne de style Unix lors de l'écriture de fichiers en le définissant sur true.
15	:filename Il s'agit du nom du fichier affiché et utilisé pour signaler les erreurs.
16	:line Il spécifie la première ligne du modèle SASS et affiche les numéros de ligne des erreurs.
17	:load_paths Il est utilisé pour charger les chemins du modèle SASS qui sont inclus à l'aide de la directive @import .
18	:filesystem_importer Il est utilisé pour importer des fichiers à partir d'un système de fichiers qui utilise la sous-classe Sass :: Importers :: Base pour gérer les chemins de chargement de chaînes.
19	:sourcemap Il génère des cartes sources qui indiquent au navigateur de trouver les styles SASS. Il utilise trois valeurs - :auto- Il contient des URI relatifs. S'il n'y a pas d'URI relatif, utilise alors l'URI "file:". :file - Il utilise des URI "file:", qui fonctionnent localement, pas sur un serveur distant. :inline - Il contient du texte source dans la carte source qui est utilisé pour créer de gros fichiers de carte source.
20	:line_numbers Il affiche le numéro de ligne des erreurs signalées dans le fichier CSS en le définissant sur true.
21	:trace_selectors Il aide à tracer les sélecteurs d'importations et de mixins lorsqu'il est défini sur true.
22	:debug_info Il fournit des informations de débogage du fichier SASS en utilisant le numéro de ligne et le fichier lorsqu'il est défini sur true.
23	:custom Il met les données à la disposition des fonctions SASS dans les applications séparées.
24	:quiet Il désactive les avertissements en le définissant sur true.

Sélection de la syntaxe

Vous pouvez déterminer la syntaxe que vous utilisez dans le modèle SASS à l'aide de l'outil de ligne de commande SASS. Par défaut, SASS utilise une syntaxe indentée qui est une alternative à la syntaxe SCSS basée sur CSS. Vous pouvez utiliser le programme de ligne de commande SCSS, qui est similaire au programme SASS, mais par défaut, il considère que la syntaxe est SCSS.

Encodages

SASS utilise le codage de caractères des feuilles de style en spécifiant les spécifications CSS suivantes -

Tout d'abord, il vérifie 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 du 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 .

Dans ce chapitre, nous étudierons CSS Extensions. Les extensions CSS peuvent être utilisées pour améliorer la fonctionnalité des pages Web. Le tableau suivant répertorie certaines des extensions CSS utilisées dans SASS -

S. Non.	Extension CSS et description
1	Règles imbriquées C'est une façon de combiner plusieurs règles CSS les unes dans les autres.
2	Référence aux sélecteurs parents: & C'est le processus de sélection du sélecteur parent en utilisant le & personnage.
3	Propriétés imbriquées Il permet l'imbrication des propriétés dans d'autres propriétés, ce qui conduit au regroupement d'un autre code associé.
4	Sélecteurs d'espace réservé Sass prend en charge le sélecteur d'espace réservé à l' aide du sélecteur de classe ou d'id en utilisant la directive @extend .

Dans ce chapitre, nous étudierons Sass Comments. Les commentaires sont des instructions non exécutables, qui sont placées dans le code source. Les commentaires facilitent la compréhension du code source. 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.

Exemple

L'exemple suivant illustre l'utilisation de commentaires dans le fichier SCSS -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ensuite, exécutez la commande ci-dessus, il créera automatiquement le fichier style.css avec le code suivant -

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans sass_comments.html fichier.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

Pour étudier l'interpolation dans les commentaires multilignes, cliquez sur ce lien .

Sass - Interpolation dans les commentaires multilignes

La description

L'interpolation dans les commentaires multilignes est résolue dans le CSS résultant. Vous pouvez spécifier des variables ou des noms de propriétés entre accolades.

Syntaxe

$var : "value";
/* multiline comments #{$var} */

Exemple

L'exemple suivant illustre l'utilisation de l'interpolation dans les commentaires multilignes dans le fichier SCSS -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ensuite, exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant

style.css

/* Framework version for the generated CSS is 7.8. */

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans sass_comments_interpolation.htm fichier.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

SASS utilise un petit ensemble d'extensions connues sous le nom de SassScript qui peuvent être incluses dans les documents SASS pour calculer des variables à partir des valeurs de propriété et utilise les propriétés des variables, l'arithmétique et d'autres fonctions. SassScript peut également être utilisé avec des sélecteurs et des noms de propriétés tout en utilisant des mixins (Mixins permet de réutiliser les styles CSS dans toute la feuille de style).

Le tableau suivant répertorie certaines des extensions CSS utilisées dans SASS -

S. Non.	Extension CSS et description
1	Shell interactif Il évalue l'expression SassScript en utilisant la ligne de commande.
2	Variables Il représente les données telles que les valeurs numériques, les caractères ou les adresses mémoire.
3	Types de données Il déclare le type de données pour chaque objet de données.
4	Opérations Il fournit des opérations telles que les opérations de nombre, de couleur, de chaîne, de booléen et de liste.
5	Parenthèses Il s'agit d'une paire de signes généralement délimités par des crochets ronds () ou des crochets [].
6	Les fonctions Il prend en charge l'utilisation de fonctions en fournissant des arguments de mots clés.
sept	Interpolation Il fournit des variables SassScript et des noms de propriétés en utilisant #{ } syntaxe.
8	& dans SassScript Il permet l'imbrication des propriétés dans une autre propriété qui conduit au groupe d'un autre code associé.
9	Valeurs par défaut des variables Il permet l'imbrication des propriétés dans une autre propriété qui conduit au groupe d'un autre code associé.

Le tableau suivant répertorie toutes les règles et directives que vous pouvez utiliser dans SASS.

S. Non.	Directives et description
1	@importer Il importe les fichiers SASS ou SCSS, il prend directement le nom de fichier à importer.
2	@médias Il définit la règle de style sur différents types de supports.
3	@étendre La directive @extend est utilisée pour partager des règles et des relations entre les sélecteurs.
4	@ à la racine La directive @ at-root est une collection de règles imbriquées, capable de créer un bloc de style à la racine du document.
5	@déboguer La directive @debug détecte les erreurs et affiche les valeurs de l'expression SassScript dans le flux de sortie d'erreur standard.
6	@prévenir La directive @warn est utilisée pour donner des conseils d'avertissement sur le problème; il affiche les valeurs de l'expression SassScript dans le flux de sortie d'erreur standard.
sept	@Erreur La directive @error affiche la valeur de l'expression SassScript comme erreur fatale.

Dans ce chapitre, nous étudierons Control Directives & Expressions. Le style basé sur certaines conditions ou l'application du même style plusieurs fois avec des variations peut être accompli en utilisant des directives et des expressions de contrôle, qui sont prises en charge par SassScript. Ces directives de contrôle sont des options avancées utilisées principalement dans les mixins. Ils nécessitent une flexibilité considérable, car ils font partie des bibliothèques Compass.

Le tableau suivant répertorie les directives et expressions de contrôle utilisées dans SASS -

S. Non.	Directive de contrôle et expression avec description
1	si() En fonction de la condition, la fonction if () renvoie un seul résultat parmi deux résultats possibles.
2	@si La directive @if accepte les expressions SassScript et utilise les styles imbriqués chaque fois que le résultat de l'expression est autre que faux ou nul .
3	@pour La directive @for vous permet de générer des styles dans une boucle.
4	@chaque Dans la directive @each , une variable est définie qui contient la valeur de chaque élément d'une liste.
5	@tandis que Il prend des expressions SassScript et jusqu'à ce que l'instruction soit évaluée à false, elle génère de manière itérative des styles imbriqués.

Les mixins permettent de créer un groupe de styles, qui sont réutilisables dans toute votre feuille de style sans avoir besoin de recréer des classes non sémantiques. En CSS, les mixins peuvent stocker plusieurs valeurs ou paramètres et appeler la fonction; cela permet d'éviter d'écrire des codes répétitifs. Les noms Mixin peuvent utiliser des traits de soulignement et des tirets de manière interchangeable. Voici les directives présentes dans Mixins -

S. Non.	Directive et description
1	Définition d'un mixin La directive @mixin est utilisée pour définir le mixin.
2	Y compris un mixin La directive @include est utilisée pour inclure les mixins dans le document.
3	Arguments Les valeurs SassScript peuvent être prises comme arguments dans les mixins, ce qui est donné lorsque mixin est inclus et disponible comme variable dans le mixin.
4	Passer des blocs de contenu à un mixin Le bloc de styles est transmis au mixin.

Dans ce chapitre, nous étudierons Function Directives. Dans SASS, 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. Les fonctions sont appelées en utilisant le nom de la fonction et avec tous les paramètres.

Exemple

L'exemple suivant illustre l'utilisation de la directive de fonction dans le fichier SCSS -

function_directive.htm

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
   @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ensuite, exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

#set_width {
   padding-left: 95px; 
}

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans function_directive.html fichier.
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

Dans la sortie, vous pouvez voir que le remplissage à gauche est appliqué.

Tout comme mixin, la fonction peut également accéder à des variables définies globalement et peut également accepter des paramètres. Vous devez appeler la valeur de retour de la fonction en utilisant@return. Nous pouvons appeler les fonctions définies par SASS en utilisant des paramètres de mot-clé.

Appelez la fonction ci-dessus comme indiqué ci-dessous.

#set_width { padding-left: adjust_width($n: 10); }

Conventions de nommage

Pour éviter les conflits de dénomination, les noms de fonction peuvent être préfixés afin de pouvoir être facilement différenciés. Comme les mixins, les arguments variables sont également pris en charge par des fonctions définies par l'utilisateur. Les fonctions et autres identificateurs SASS peuvent utiliser des traits de soulignement (_) et des tirets (-) de manière interchangeable.

Par exemple, si une fonction est définie comme adjust_width, il peut être utilisé comme adjust-width, et vice versa.

Dans ce chapitre, nous étudierons SASS Output Style. 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; d'autre part, SASS prend en charge de nombreux autres styles.

Il prend en charge les différents styles de sortie suivants -

: imbriqué

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. Il rend la structure du fichier plus lisible et peut être facilement comprise. Chaque propriété prend sa propre ligne et l'indentation de chaque règle est basée sur la profondeur de son imbrication.

Par exemple, nous pouvons imbriquer le code dans un fichier SASS comme indiqué ci-dessous -

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

:étendu

Dans le type étendu de style CSS, chaque propriété et règle a sa propre ligne. Cela prend plus de place que le style CSS imbriqué. La section Rules se compose de propriétés, qui sont toutes prévues dans les règles, tandis que les règles ne suivent aucune indentation.

Par exemple, nous pouvons développer le code dans le fichier SASS comme indiqué ci-dessous -

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:compact

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. Chaque sélecteur occupe une ligne et ses propriétés sont également placées sur la même ligne. Les règles imbriquées sont positionnées les unes à côté des autres sans nouvelle ligne et les groupes de règles séparés auront de nouvelles lignes entre eux.

Par exemple, nous pouvons compacter le code dans le fichier SASS comme indiqué ci-dessous -

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

:comprimé

Le style CSS compressé prend le moins d'espace par rapport à tous les autres styles décrits ci-dessus. Il fournit des espaces uniquement pour séparer les sélecteurs et le retour à la ligne à la fin du fichier. Cette façon de styliser est déroutante et n'est pas facilement lisible.

Par exemple, nous pouvons compresser le code dans le fichier SASS comme indiqué ci-dessous -

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}

Vous pouvez étendre les fonctionnalités de SASS pour fournir différents types de fonctionnalités et de personnalisations aux utilisateurs. Pour utiliser ces fonctionnalités, l'utilisateur doit avoir une connaissance de Ruby.

Définition des fonctions SASS personnalisées

Vous pouvez définir vos propres fonctions SASS tout en utilisant l'API Ruby. Vous pouvez ajouter vos fonctions personnalisées en les ajoutant aux méthodes Ruby comme indiqué dans le code suivant -

module Sass::Script::Functions
   def reverse(string)
      assert_type string, :String
      Sass::Script::Value::String.new(string.value.reverse)
   end
   declare :reverse, [:string]
end

Dans le code que vous pouvez voir, la fonction, declare, spécifie les noms d'argument de la fonction. En cas d'échec, elle n'acceptera aucun argument même si la fonction fonctionne et elle prend également des arguments de mot-clé arbitraires. Vous pouvez obtenir des valeurs Ruby à l'aide de l' accesseur de valeur et accéder aux objets de couleur à l'aide de rgb, rouge, vert ou bleu .

Magasins de cache

SASS stocke le cache des documents analysés, qui peuvent être réutilisés sans analyse à nouveau. SASS utilise:cache_locationpour écrire des fichiers cache sur le système de fichiers. Cela accélère la compilation des fichiers SASS et si vous supprimez les fichiers mis en cache, ils seront à nouveau générés lors de la prochaine compilation. Vous pouvez définir votre propre magasin de cache en définissant le:cache_storeoption. Cela écrira des fichiers de cache sur le système de fichiers ou partagera des fichiers de cache avec des processus ou des machines ruby. SASS utilise une instance de la sous-classe de Sass :: CacheStores :: Base pour stocker et récupérer les résultats du cache.

Importateurs personnalisés

SASS utilise @import pour importer les fichiers SCSS et SASS et transmet les chemins à la règle @import pour trouver un code de chemin approprié pour les chemins spécifiés. Les importateurs SASS utilisent le système de fichiers pour charger le code et l'ajouté à la charge à l'aide d'une base de données ou d'un schéma de dénomination de fichier différent.

Un seul importateur peut prendre en charge le chargement d'un seul fichier et peut être placé dans le tableau : load_paths avec les chemins du système de fichiers. Lors de l'utilisation de @import , SASS recherche les chemins chargés, qui importent le chemin pour l'importateur. Lorsque le chemin est trouvé, le fichier importé est utilisé. Un utilisateur peut hériter des importateurs deSass::Importers::Base.

↰ Previous page

Sass - Guide rapide

Qu'est-ce que SASS?

Pourquoi utiliser SASS?

Caractéristiques de SASS

Avantages du SASS

Inconvénients du SASS

Configuration système requise pour SASS

Installation de Ruby

Exemple

style.css

Syntaxe indentée SASS

Différences de syntaxe de SASS

Syntaxe de propriété

Sélecteurs multilignes

Exemple

style.scss

style.css

Production

commentaires

@importer

Directives Mixin

Syntaxe obsolète

Plugin Rack / Rails / Merb

Mise en cache

Options

Sélection de la syntaxe

Encodages

Exemple

style.scss

style.css

Production

Sass - Interpolation dans les commentaires multilignes

La description

Syntaxe

Exemple

style.css

style.css

Production

Exemple

function_directive.htm

style.scss

style.css

Production

Conventions de nommage

: imbriqué

:étendu

:compact

:comprimé

Définition des fonctions SASS personnalisées

Magasins de cache

Importateurs personnalisés

Tutoriel Sass

Ressources utiles Sass