✅ Comment installer SASS? - Guide complet sur l'installation de SASS

Comment installer SASS:
SASS example Example It is a bright and sunny day

Comment installer SASS:

SASS ou Syntactically Awesome Stylesheets est une extension de CSS et nous aide à écrire des styles plus flexibles. Cela ajoute plus de puissance au langage de base de CSS. SASS est un langage de prétraitement qui est compilé en CSS et a différentes syntaxes techniques. L'écriture de code dans SASS ne permet pas aux navigateurs d'interpréter le code comme si ce n'était pas du CSS approprié, mais nous avons plutôt besoin d'un compilateur pour compléter le code que nous écrivons en CSS pour que les navigateurs puissent l'interpréter et le comprendre. Les variables, les mixins, les règles imbriquées, les importations en ligne, etc. peuvent être utilisés dans SASS avec une syntaxe CSS compatible. Avec l'aide de la bibliothèque de styles de boussole, Syntactically Awesome Stylesheets garde les grandes feuilles de style bien organisées et permet aux petites feuilles de style de fonctionner en très peu de temps. Avec des fonctionnalités telles que la plate-forme entièrement compatible CSS et des extensions de langage comme l'imbrication, les mixins, WTC, il fournit également des fonctionnalités comme de nombreuses fonctions importantes pour manipuler les couleurs et différentes autres valeurs. Il possède également d'autres fonctionnalités avancées telles que des directives de contrôle pour les bibliothèques, une sortie correctement formatée et personnalisable, et bien d'autres.

Vous trouverez ci-dessous la configuration système requise pour l'installation des feuilles de style Syntactically Awesome:

Système d'exploitation - Il peut s'agir de n'importe quel système d'exploitation multiplateforme.
Langage de programmation - Le langage de programmation est Ruby.
Navigateur - Il peut s'agir de n'importe quel navigateur comme Google Chrome, Internet Explorer, Safari, Mozilla Firefox, Opera, etc.

Étapes pour installer SASS:

Voici les étapes pour installer le package Syntactically Awesome Stylesheets dans le système:

Étape 1:

Téléchargez la version stable actuelle de Ruby en utilisant le lien ci-dessous. Il télécharge un fichier zip qui doit être décompressé pour une installation ultérieure. Winzip ou 7zip peut être utilisé pour décompresser le fichier.

https://www.ruby-lang.org/en/downloads/

Étape 2:

Après décompression, installez Ruby dans le système en suivant la procédure d'installation standard.

Étape 3:

Ajoutez le dossier Ruby bin à une variable utilisateur PATH et à la variable système afin qu'il puisse fonctionner avec la commande gem.
Pour ajouter les variables PATH:

Tout d'abord, faites un clic droit sur l'icône de mon ordinateur sur le bureau.
Accédez aux propriétés dans le menu déroulant.
Après cela, cliquez sur l'onglet avancé, puis cliquez sur les variables d'environnement.

Après l'ouverture de la fenêtre des variables d'environnement, double-cliquez sur la colonne PATH sous variables en haut. Voici la capture d'écran qui le montre:

En double-cliquant sur PATH, la fenêtre d'édition des variables utilisateur s'ouvrira. Ajoutez le chemin ruby bin dans le champ de valeur de la variable en tant que C: \ Ruby \ bin. Dans le cas où d'autres chemins sont définis pour d'autres fichiers, mettez simplement un point-virgule et ajoutez le chemin ruby. Voici la capture d'écran qui le montre:

Cliquez sur le bouton OK pour terminer la tâche.

Définition de la variable système:

Sous le système, l'onglet variable clique sur le nouveau bouton.
Après cela, la nouvelle fenêtre de variable système s'ouvrira. Remplissez avec RubyOpt dans le champ pour le nom de variable et RubyGems dans le champ pour la valeur de variable. Cliquez ensuite sur le bouton OK pour terminer la tâche. Voici la capture d'écran qui le montre:

Étape 4:

Dans l'invite de commande du système, exécutez la commande gem install Scss. Cela installera sass dans le système.

Étape 5:

SASS lors de l'installation réussie donnera l'écran ci-dessous. Vérifiez-le pour être confirmé.

Voici un exemple montrant une implémentation de base de SASS.

SASS example Example It is a bright and sunny day

`SASS example Example It is a bright and sunny day`


SASS example

Example
It is a bright and sunny day

`SASS example Example It is a bright and sunny day`


SASS example

Example
It is a bright and sunny day

Nous allons créer un beau examples.css qui est similaire à CSS attend le fait qu'il sera enregistré avec l'extension .scss. Cela doit être créé dans le dossier ruby avec les fichiers .htm. Facultativement, le fichier scss peut également être enregistré avec le chemin du dossier ruby \ lib \ scss. Créez le dossier sass dans le dossier lib avant de créer le fichier scss.

h1( color: #AF80ED; ) h3( color: #DE5E85; )

SASS peut être dirigé pour regarder le fichier et mettre à jour le CSS chaque fois qu'il y a un changement dans le fichier SCSS. Voici la commande:

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

En exécutant la commande ci-dessus, il créera automatiquement un fichier example.css. Lors de la modification du fichier scss, le fichier example.css sera mis à jour automatiquement.

En exécutant la commande ci-dessus, le fichier example.css sera créé avec le contenu suivant.

h1( color: #AF80ED; ) h3( color: #DE5E85; )

Outre les étapes ci-dessus, les autres méthodes d'installation de SASS sont les suivantes:

Il existe de nombreuses applications qui offrent des moyens simples et conviviaux d'installer SASS. Ceux-ci peuvent être téléchargés sur Internet. Parmi ceux-ci, peu d'entre eux sont gratuits tandis que d'autres sont payés.

NPM peut également être utilisé pour installer SASS dans le cas où l'utilisateur utilise node.js.

Ainsi, dans le guide étape par étape ci-dessus, SASS peut être installé avec succès dans un système. Voici la commande:

npm install -g sass

Mais veuillez noter que cette installation installera une implémentation pure javascript de Syntactically Awesome Stylesheets qui est comparativement plus lente que les autres méthodes présentées ici, mais elle a toujours la même interface que les autres méthodes. Ainsi, en cas de lenteur, tout problème sera très facile à passer à une autre implémentation ultérieurement pour améliorer la vitesse.

Si un utilisateur exécute le gestionnaire de paquets Chocolatey pour Windows, dart SASS peut être installé. Voici la commande:

choco install sass

Si un utilisateur utilise le gestionnaire de paquets Homebrew pour Mac OS X, dart SASS peut être installé. Voici la commande:

brew install sass/sass/sass

Ainsi, avec tant de fonctionnalités, SASS ou Syntactically Awesome Stylesheets offre un large éventail de fonctionnalités utilisées pour concevoir des pages Web avec plus de facilité. SASS fournit différentes extensions CSS comme les propriétés imbriquées, les sélections d'espace réservé, etc. Il prend également en charge les scripts SASS offrant un shell interactif pour la programmation ainsi que la prise en charge de différentes variables, types de données, opération, fonction, interpolation, etc. effectuer. Ajout de toutes ses fonctionnalités SASS fournit une plate-forme exceptionnellement grande qui fonctionne avec la conception Web et autres.

Comment installer SASS? - Guide complet sur l'installation de SASS