Sass - Installazione

In questo capitolo impareremo la procedura passo passo per installare Ruby, che viene utilizzato per eseguire i file SASS.

Requisiti di sistema per SASS

  • Operating System - Cross-platform

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

  • Programming Language - Ruby

Installazione di Ruby

Step 1 - Apri il link https://www.ruby-lang.org/en/downloads/, vedrai una schermata come mostrato di seguito -

Scarica la versione stabile corrente del file zip.

Step 2 - Quindi, esegui il setup per l'installazione Ruby sul sistema.

Step 3- Successivamente, aggiungi la cartella Ruby bin alla variabile utente PATH e alla variabile di sistema per lavorare con il comando gem.

Path User Variable -

  • Fare clic con il pulsante destro del mouse su My Computer icona.

  • Selezionare Properties.

  • Quindi fare clic su Advanced scheda e fare clic Environment Variables.

Nella finestra Variabili d'ambiente , fare doppio clic sul PERCORSO come mostrato nella schermata riportata di seguito -

Otterrai una casella Modifica variabile utente come mostrato. Aggiungi il percorso della cartella Ruby bin nel campo Valore variabile comeC:\Ruby\bin. Se il percorso è già impostato per altri file, inserisci il punto e virgola dopo e aggiungi il percorso della cartella Ruby come mostrato di seguito.

Clicca il OK pulsante.

System Variable -

  • Clicca il New pulsante.

Successivamente, il New System Variable blocco viene visualizzato come mostrato di seguito.

  • accedere RubyOptnel campo Nome variabile erubygemsnel campo Valore variabile . Dopo aver scritto il nome e il valore della variabile , fare clic suOK pulsante.

Step 4 - Apri il prompt dei comandi nel tuo sistema e inserisci la seguente riga -

gem install sass

Step 5 - Successivamente, vedrai la seguente schermata dopo aver installato con successo SASS.

Esempio

Quello che segue è un semplice esempio di 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>

Ora creeremo il file come style.scss , che è abbastanza simile a CSS e l'unica differenza è che verrà salvato con l'estensione .scss. Entrambi i file .htm e .scss dovrebbero essere creati all'interno della cartellaruby. Puoi salvare il tuo file .scss nella cartellaruby\lib\sass\ (prima di questo processo, crea una cartella come sass nella directory lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

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

Quando esegui il comando precedente, creerà automaticamente il file style.css . Ogni volta che si modifica il file SCSS, il file style.css verrà aggiornato automaticamente.

Il file style.css avrà il seguente codice quando esegui il comando sopra indicato:

style.css

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

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice sopra indicato in formato hello.html file.

  • Apri questo file HTML in un browser.