Sass - Installation

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.