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.

Riferimenti

See Also