Comment installer et commencer avec SASS?

Syntacticalement Awesome Stylesheet (SASS), une extension de CSS qui pré-processus CSS et 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, vous pouvez télécharger et utiliser Sass gratuitement. Dans cet article, nous vous expliquerons comment installer et commencer par Sass.

Comment installer et commencer par SASS

La procédure d'installation de SASS peut être effectuée de diverses manières, telles que l'utilisation de certaines applications open source, l'installation de SASS en utilisant la ligne de commande, l'installation sur les éditeurs de code souhaités tels que VS Code, sublime, atome, etc., ou l'installation n'importe où du référentiel github.

Discutons en détail de ces procédures d'installation.

Installez SASS à l'aide d'applications

Il existe de nombreuses applications disponibles (payées et gratuites) qui vous aideront à installer et à exécuter SASS en un rien de temps pour Windows, Mac OS et Linux. Certaines applications sont répertoriées ci-dessous.

1. Prepos (payé) pour Windows, Mac et Linux.
2. Codekit (payé) pour mac.
3. Marteau (payé) pour mac.
4. Koala (gratuit) pour Mac, Linux et Windows.
5. Scout-App (gratuit) pour Linux, Mac et Windows.

Note: Il n'est pas nécessaire d'utiliser les applications payantes pour les phases de développement initiales car les libres sont entièrement fonctionnelles.

Installez SASS en utilisant la ligne de commande

Ci-dessous, nous avons discuté de la façon dont vous pouvez installer SASS en utilisant la ligne de commande sur diverses plates-formes.

Installation n'importe où (autonome)

Vous pouvez avec une grande facilité d'installer SASS sur n'importe quelle plate-forme telle que Mac OS, Linux, Windows en téléchargeant son package pertinent pour la plate-forme que vous utilisez, à partir du référentiel GitHub. Une fois téléchargé, incluez le package dans votre chemin. Une telle installation ne nécessite aucune dépendance, par conséquent, c'est l'approche la plus simple.

Installation via NPM

Si vous êtes un nœud.Utilisateur JS puis vous pouvez utiliser la commande NPM suivante et installer le package de SASS.

NPM Install -g Sass

La commande ci-dessus installe une implémentation JS pure de SASS qui est un peu plus lente que les autres options d'installation disponibles. Cependant, si vous souhaitez améliorer sa vitesse, vous pouvez changer votre implémentation à n'importe quelle autre, car l'implémentation JS a la même interface que d'autres implémentations.

Installation par chocolaté

Si vous avez un système d'exploitation Windows et que vous avez également installé un gestionnaire de packages chocolatés, vous utilisez la commande suivante pour installer Dart Sass.

Choco Installer Sass

Installation via Homebrew

Les utilisateurs de Mac OS X et Linux peuvent installer le package SASS à l'aide du Homebrew Package Manager via la commande suivante.

Brew Installer Sass / Sass / Sass

Installer SASS sur les éditeurs de code

Comme déjà mentionné, vous pouvez utiliser SASS sur divers éditeurs de code tels que VS Code, Sublime, Atom, etc. Cela pourrait être une option préférée pour beaucoup, car la plupart d'entre nous connaissent déjà de nombreux éditeurs de code populaires. Par exemple, par souci de compréhension, nous allons montrer ici comment vous pouvez utiliser Sass sur VS Code.

Étape 1

Visitez le compilateur en direct SASS et appuyez sur Installer pour télécharger l'extension.

Étape 2

Dès que vous appuyez sur le bouton Installer, l'extension s'ouvrira dans votre éditeur de code vs.

Maintenant, appuyez sur le bouton d'installation en surligné et l'extension sera installée dans l'éditeur de code.

Extension installée avec succès!

Note: Lorsque l'extension est installée, vous pouvez utiliser Ctrl + shift + x pour ouvrir l'extension à tout moment.

Étape 3

Maintenant vous pouvez ouvrir le .Fichier SCSS et commencez à écrire votre feuille de style. Une fois que vous avez fait cela, vous remarquerez une option disant «Regardez Sass» dans l'éditeur.

Cliquez sur cette option pour générer le fichier CSS MAP et le fichier CSS automatiquement. Plus tard, vous pouvez lier ce fichier CSS à votre document HTML.

Suivez les étapes susmentionnées pour installer facilement SASS sur votre éditeur de code vs.

Conclusion

Vous pouvez installer et démarrer avec SASS en utilisant différentes manières telles que l'utilisation de certaines applications open source, l'installer en utilisant la ligne de commande, l'installer sur les éditeurs de code souhaités tels que le code vs, sublime, atome, etc., ou l'installation de partout à partir de Le référentiel GitHub. Vous pouvez sélectionner l'une des options en fonction de votre facilité et de votre désir. Toutes ces options ont été expliquées en profondeur dans ce post.