Mr. Webmaster Menu
  • Home
  • Cerca
  • Didattica
    • A
    • Android
    • Apache
    • Apple
    • ASP
    • ASP.Net
    • C
    • Cloud
    • CMS
    • CSS
    • D
    • Database
    • E
    • Editor
    • G
    • Grafica
    • H
    • Hosting
    • HTML
    • J
    • Java
    • Javascript
    • jQuery
    • L
    • Leggi e Fisco
    • Linux
    • M
    • Mobile
    • MySQL
    • N
    • NET Framework
    • P
    • Photoshop
    • PHP
    • Primi Passi
    • Programmazione
    • R
    • Reti
    • Ruby
    • S
    • Sicurezza
    • Social Media
    • SQL
    • W
    • Web Design
    • Web Marketing
    • Web Server
    • Windows
    • WordPress
    • X
    • XML
    • Di tendenza
    • Android Studio
    • Bootstrap
    • GDPR
    • Hosting Wordpress
    • Node.js
    • Registrazione Domini
  • Download
    • Software
    • Script
    • Plugin CMS
    • Flash Movies
    • Sound Loops
    • Templates
    • Web Grafica
    • Font Gratis
  • Risorse
    • SEO Tools
    • WebApps
  • News
  • Blog
  • Forum
  • Network
    • Toolset.it
    • SiteMarket.it
    • Codalo.it
  • Corsi on-line
Mr. Webmaster → CSS → Guida SASS → Utilizzo del compilatore

Utilizzo del compilatore in SASS

  • CommentaScrivi un commento
  • ForumDiscuti sul forum
  • PrecedenteIntroduzione e Installazione di SASS
  • SuccessivoDiversi modi per compilare Sass
  • Pubblicato il
  • 11/09/2018
  • Autore
  • Claudio Marotta

Vediamo, in questa lezione, un primo semplice esempiodi utilizzo del comando node-sass.
All'interno di una nuova cartella creiamo due file: index.html e style.scss. Al file HTML assegnamo questo contenuto:

<!-- file index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Esempio - node-sass</title>
</head>
<body>
  <div class="container">
    <p>Ciao</p>
  </div>
</body>
</html>

All'interno del file style.scss inseriamo il codice riportato sotto.

/* file style.scss */
$primary-color: #c69;
$text-color: white;

.container {
  width: 200px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  background-color: $primary-color;
  border-radius: 8px;

  p {
    font-size: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: $text-color;
  }
}

Per il momento non ci soffermiamo sulla sintassi, che approfondiremo nelle prossime lezioni. È però facile intuire che abbiamo usato due variabili dichiarate all'inizio del file. Per capire qual è invece il significato della regola per il paragrafo, inserita all'interno della regola per gli elementi della classe container, basta lanciare il comando mostato sotto con il quale generiamo il file style.css che abbiamo importato nel file HTML.

Continua dopo la pubblicità...

Anche per ragioni di prestazioni è opportuno compilare i file con estensione .scss e generare i rispettivi file .css. Saranno infatti questi ultimi a essere inseriti all'interno dei file HTML.

node-sass style.scss > style.css

Il comando node-sass si limita a convertire in CSS il file style.scss e a mostrare il risultato a video. Per questo motivo chiediamo di redirigere lo standard output (>) del comando sul file style.css che conterrà il frammento di codice riportato sotto.

/* file style.css */
.container {
  width: 200px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  background-color: #c69;
  border-radius: 8px; 
}

.container p {
  font-size: 2em;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white; 
}

In alternativa possiamo semplicemente specificare il nome del file CSS come secondo argomento.

node-sass style.scss style.css
Rendering Complete, saving .css file...
Wrote CSS to /Users/claudio/esempio_sass/style.css

Le due sintassi disponibili in Sass

Nell'esempio appena visto abbiamo creato un file con estensione .scss che abbiamo poi convertito in normale codice CSS. In realtà, però, Sass mette a disposizione due diversi tipi di sintassi.

SCSS (o Sassy CSS)

La prima è quella appena vista che è simile al linguaggio CSS. Infatti, ogni foglio di stile creato in CSS contiene del codice che possiamo tranquillamente riusare nei file .scss all'interno dei quali abbiamo però a disposizione diverse funzionalità che non sono presenti nel linguaggio CSS. Questo primo tipo di sintassi prende il nome di SCSS (Sassy CSS)

SASS

Esiste poi un altro tipo di sintassi, nota come sintassi indentata, che fornisce un modo più conciso di scrivere i file Sass. Per esempio si usa l'indentazione al posto delle parentesi e, per separare le varie dichiarazioni, il punto e virgola viene sostituito semplicemente dal ritorno a capo.
In quest'ultimo caso creeremo dei file con estensione .sass al posto dei file con estensione .scss.

L'esempio visto in precedenza può quindi essere riscritto utilizzando la sintassi appena descritta.

/* file style.sass */
$primary-color: #c69
$text-color: white

.container
  width: 200px
  height: 150px
  line-height: 150px
  text-align: center
  background-color: $primary-color
  border-radius: 8px

  p
    font-size: 2em
    font-family: Arial, Helvetica, sans-serif
    font-weight: bold
    color: $text-color

Al contrario di node-sass (che non permette di trasformare un file .sass in formato SCSS e viceversa), installando Ruby Sass (gem install sass), abbiamo la possibilità di lanciare il comando sass-convert che, come è possibile intuire, consente di convertire Sass in SCSS e viceversa.

# conversione Sass -> SCSS
sass-convert style.sass style.scss

# Conversione SCSS -> Sass
sass-convert style.scss style.sass

Conclusioni

In questa lezione abbiamo visto come compilare un file .scss in CSS via linea di comando. Abbiamo anche accennato alla sintassi .sass precisando, però, che il compilatore node-sass non la supporta.
Nella prossima lezione inizieremo a vedere alcuni metodi alternativi per compilare i file con estensione .scss ripartendo dal comando node-sass di cui vedremo alcune delle opzioni più interessanti.

Sfoglia le lezioni

← Introduzione e Installazione di SASS
→ Diversi modi per compilare Sass

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Frequenta i nostri corsi
  • Corso CSSCorso CSS
    Stilizzare siti Web coi CSS e CSS3. A partire da 39 €
  • Corso HTMLCorso HTML
    Il linguaggio di markup delle pagine web. A partire da 29 €
  • Corso Webmaster AvanzatoCorso Webmaster Avanzato
    Diventa un Webmaster professionista. A partire da 49 €
Vedi anche...
  • Risorse utili per Sass
  • Le funzioni in Sass
  • Sass: mixin e la direttiva @content
  • Strumenti per il debugging in Sass: sourcemap
  • Sass: la direttiva @extend e i placeholder
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie
Altro: sondaggi / feed