sass Tutorial
Iniziare con sass

Osservazioni

Versioni

Impostare

Quando si tratta di usare il SASS, ci sono molti modi per impostare il tuo spazio di lavoro. Alcune persone preferiscono usare strumenti a riga di comando (probabilmente persone Linux) e altri preferiscono usare le applicazioni GUI. Coprirò entrambi.

Strumenti da riga di comando

La pagina 'Installa SASS' su sass-lang.com copre abbastanza bene. Puoi usare SASS con Ruby (che può essere installato da un gestore di pacchetti Linux o puoi scaricare il programma di installazione su Windows). macOS viene fornito con Ruby preinstallato.

Una volta installato Ruby, è necessario installare SASS (in alcuni casi, sudo potrebbe non essere necessario):

sudo gem install sass

Infine, puoi verificare di aver installato SASS con sass -v .

Applicazioni GUI

Mentre ci sono un certo numero di applicazioni GUI che è possibile utilizzare, raccomando Scout-App . Si auto-costruisce e comprime i file CSS per te, salva e supporta macOS, Windows e Linux.

variabili

Se hai un valore che usi spesso, puoi memorizzarlo in una variabile. Si potrebbe usare questo per definire schemi di colori, per esempio. Dovresti solo definire il tuo schema una volta e poi puoi usarlo nei tuoi fogli di stile.

Per definire una variabile, è necessario anteporre il suo nome al simbolo $. (Come faresti in PHP.)

È possibile memorizzare qualsiasi valore di proprietà CSS valido all'interno di una variabile. Come colori, caratteri o URL.

Esempio 1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

Importazione

Assumiamo il seguente scenario: hai due fogli di stile: _variables.scss e layout.scss . Logicamente, mantieni tutte le tue variabili all'interno del tuo foglio di stile delle variabili ma vuoi accedervi dal tuo foglio di stile del layout.

NOTA: Si può notare che il foglio di stile delle variabili ha un carattere di sottolineatura ('_') prima del suo nome. Questo perché è parziale - il che significa che verrà importato.

sass-lang.com dice quanto segue sui partial : puoi creare file Sass parziali che contengono piccoli frammenti di CSS che puoi includere in altri file Sass. Questo è un ottimo modo per modulare il tuo CSS e aiutare a mantenere le cose più facili da mantenere. [...] Il trattino basso consente a Sass di sapere che il file è solo un file parziale e che non dovrebbe essere generato in un file CSS. I partial Sass sono usati con la direttiva @import.

Le variabili SCSS sono grandi per questo scenario. Supponiamo che il tuo _variables.scss assomigli a questo:

$primary-color: #333;

Puoi importarlo con @import e poi il nome del foglio di stile tra virgolette. Il tuo foglio di stile del layout ora può assomigliare a questo (prendi nota di non essere un trattino basso o un'estensione di file nell'importazione):

@import 'variables';
body {
  color: $primary-color;
}

Ciò produrrebbe qualcosa come il seguente:

body {
  color: #333;
}

annidamento

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

produzione

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

Commenti

SASS supporta due tipi di commenti:

• Commenti incorporati: si estendono su una sola riga e vengono solitamente utilizzati per descrivere una variabile o un blocco. La sintassi è la seguente: // Your comment here (lo anteponi con una doppia barra ( // ) e il resto della riga viene ignorato dal parser.

• Commenti multilinea: si estendono su più righe e vengono solitamente utilizzati per visualizzare un copyright o una licenza nella parte superiore di un documento. Puoi aprire un blocco di commenti multilinea con /* e puoi chiudere un blocco di commenti multilinea con */ . Ecco un esempio:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/