Che cos’è un file SASS?
Sass (fogli di stile sintatticamente fantastici) è un linguaggio di scripting del preprocessore. Viene compilato in CSS ed è archiviato con l’estensione .sass. Sass è costituito da due sintassi, l’originale basata su indentazioni che utilizza l’estensione .sass e la più recente SCSS con formattazione a blocchi come CSS che utilizza l’estensione .scss.
Perché usare Sass
Sass è davvero utile nel mantenimento degli stili in quanto fornisce molte funzionalità come l’introduzione di variabili, il nesting, i mixin, le importazioni e l’ereditarietà del selettore che rendono divertente il lavoro con gli stili.
Come utilizzare i file SASS
I file SASS non sono inclusi direttamente nel documento HTML ma sono piuttosto convertiti in file CSS inclusi nei file HTML. È possibile installare Sass del proprio sistema seguendo le istruzioni fornite sul Sito Ufficiale Sass.
Sass può essere convertito in CSS convertendo un file SASS già salvato o controllando le modifiche e convertendo mentre il file viene salvato. I comandi per entrambi sono riportati di seguito.
Converti una volta
Il primo parametro del comando è il file SASS di origine e il secondo parametro è il file CSS di output.
sass main.sass main.css
Fai attenzione alle modifiche
Il comando sopra può essere eseguito con un flag watch aggiuntivo che mantiene il comando in esecuzione e non appena il file Sass viene salvato, viene generato il CSS di output.
sass --watch main.sass main.css
Sintassi Sass
Sass supporta variabili, annidamento, mixin, importazioni, ereditarietà del selettore, ecc. Di seguito sono riportati esempi di queste funzionalità.
Variabili
Le variabili possono essere utilizzate per impostare informazioni riutilizzabili come il colore primario o il riempimento per un pulsante. Questo può rivelarsi utile se in futuro è necessario modificare tali informazioni, basta cambiarle in una posizione e si aggiorna ovunque.
Sasso
$primary-color: #47dff0
$secondary-color: darken($primary-color, 50%)
$margin: 16px
.highlight
border-color: $primary-color
color: $secondary-color
h1
span
margin: $margin / 2
color: $secondary-color
CSS generato
.highlight {
border-color: #47dff0;
color: #042f34;
}
h1 {
color: #042f34;
}
h1 span {
margin: 8px;
}
Nidificazione
I selettori CSS possono essere nidificati in modo simile alla gerarchia dell’HTML. Nell’esempio seguente, l’estensione è nidificata all’interno del blocco h1.
Sasso
$primary-color: #47dff0
$secondary-color: darken($primary-color, 50%)
$margin: 16px
.highlight
border-color: $primary-color
color: $secondary-color
h1
span
margin: $margin / 2
color: $secondary-color
CSS generato
.highlight {
border-color: #47dff0;
color: #042f34;
}
h1 {
color: #042f34;
}
h1 span {
margin: 8px;
}
Mixin
I mixin vengono utilizzati per raggruppare proprietà simili che vengono utilizzate in più posizioni. I mixin supportano anche i parametri.
Sasso
Dichiarazione di un mixin
// Simple
=error-text
color: red
font-size: 25px
font-weight: bold
border: 1px solid black
padding: 10px
// With Parameter
=message-text($color)
color: $color
font-size: 25px
font-weight: bold
border: 1px solid black
padding: 10px
Usare un mixin
.error
+error-text()
.success
+message-text(green)
.info
+message-text(blue)
CSS generato
.error {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid black;
padding: 10px;
}
.success {
color: green;
font-size: 25px;
font-weight: bold;
border: 1px solid black;
padding: 10px;
}
.info {
color: blue;
font-size: 25px;
font-weight: bold;
border: 1px solid black;
padding: 10px;
}
Estendi
Estendi/Ereditarietà può rivelarsi utile nei casi in cui le proprietà di un selettore devono essere condivise con un altro selettore. Nell’esempio seguente, il selettore .error-notice prende tutte le proprietà del selettore .error-text e aggiunge le proprietà del bordo e del riempimento.
Sasso
.error-text
color: red
font-size: 25px
font-weight: bold
.error-notice
@extend .error-text
border: 1px solid black
padding: 10px
CSS generato
.error-text, .error-notice {
color: red;
font-size: 25px;
font-weight: bold;
}
.error-notice {
border: 1px solid black;
padding: 10px;
}
Importa
L’importazione può essere utile se strutturi i tuoi stili in file diversi in base alla funzionalità o a qualsiasi altra struttura che segui. Puoi importare tutti questi file in un file SASS primario che viene successivamente convertito in CSS. Durante l’importazione, non è necessario specificare l’estensione del file nell’istruzione di importazione. Sass compila direttamente tutti i file SASS. Per evitare che i file di importazione vengano compilati direttamente, puoi renderli parziali aggiungendo underscore(_) all’inizio del loro nome. I parziali vengono importati in modo simile ai normali file Sass.
Sasso
@import "variables"
@import "header-styles"
@import "footer-styles"
Il CSS di output avrà gli stili di tutti i file importati.