Sass

Che cos’è un preprocessore CSS?

Un preprocessore CSS nasce con l’intento di potenziare gli strumenti per definire fogli di stile.

 

Si occupa anche di generare un file CSS, pre-processando e aggregando la struttura di file prodotta dallo sviluppatore.

 

Esistono diversi preprocessori CSS:

  • SASS (SCSS)
  • LESS
  • Stylus
  • ecc

Installazione

npm install -g sass

Un esempio

// menu.scss
nav {
    display: block;

    ul {
        display: inline;
    }
}
sass menu.scss menu.css
// menu.css
nav { display: block; }
nav ul { display: inline; }

Watch

Con l'opzione --watch è possibile far partire il watcher di sass, che permette di stare in ascolto di tutti i file scss da compilare.

 

// Guarda tutti i file nella cartella attuale
sass --watch .


// Guarda app.scss compila in output.css
sass --watch app.scss:output.css

Sourcemaps

Un potenziale problema che potrebbe emergere dall’utilizzo di SCSS è lo scarso controllo del file CSS generato.

Può diventare complicato risalire all’esatta istruzione SCSS che ha generato la porzione di codice CSS che ci interessa.

 

Possiamo avvalerci delle source maps per risolvere questo problema.

Le source maps sono file che correlano un documento ad un altro esponendone la relazione.

 

Usando poi i DevTools possiamo risalire a quale file ha generato l'istruzione che ci interessa.

Selettori nidificati

La prima funzionalità di SASS è la possibilità di nidificare i selettori con le istruzioni di stile che ci interessano.

// app.scss
#main {
    p {
        font-size: 1,5em;
        margin-bottom: 10px;
    }
    span {
        font-size: 1.2em;
        padding-left: 10px;
    }
    a {
        color: red;
        text-decoration: none;
    }
}

// app.css
#main p {
    font-size: 1,5em;
    margin-bottom: 10px;
}
#main span {
    font-size: 1.2em;
    padding-left: 10px;
}
#main a {
    color: red;
    text-decoration: none;
}

Utilizzo della keyword &

Con la keyword & è possibile sostituire con il selettore padre in qualsiasi posizione essa si trovi.

Un breve esempio.

// app.scss
a {
    color: red;
        font-size: 1.5em;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

// app.css
a {
    color: red;
    font-size: 1.5em;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

Utilizzo della keyword &

// app.scss
#main {
    color: black;

    &-sidebar {
        border: 1px solid;
    }

    body.firefox & {
        line-height: 1.5em
    }
}

// app.css
#main {
    color: black;
}
#main-sidebar {
    border: 1px solid;
}
body.firefox #main{
    line-height: 1.5em
}

Le @mixins

@mixin è una potente direttiva che consente infatti di creare gruppi di selettori e proprietà CSS ripetibili all’interno del nostro fogli di stile su cui possiamo applicare dei parametri arbitrari, proprio come invocare una funzione alla quale passare un set di argomenti.

@mixin baseButton($bgColor) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px 20px;
    display: inline-block;
    text-transform: uppercase;
    background: $bgColor;
    outline: 1px solid $bgColor;
    box-shadow: 0 0 10px $bgColor;
    color: white;
    border: 1px solid white;

    &:hover {
        color: $bgColor;
        background: white;
        box-shadow: none;
	}
}
button.green{
    @include baseButton(green);
}
button.red{
    @include baseButton(red);
}

Le variabili

$bgColor: "red";

body {
    background-color: $bgColor;
}

Con SASS è anche possibile utilizzare le variabili.

Le variabili possono essere di varia natura: stringhe, numeri, booleani, ecc.

In CSS sono ammessi due tipi di stringhe: con virgolette (sia singole che doppie) e senza virgolette.

Entrambi i tipi di stringhe sono validi in Sass, che genera nel codice compilato lo stesso tipo di stringa dichiarato, con l’unica eccezione dell’interpolazione.

L'interpolazione

// app.scss
$large-screen: 1280px;
$large: "only screen and (max-width: #{$large-screen})";
@media #{$large} { ... }

// app.css
@media only screen and (max-width: 1280px) { ... }

L’interpolazione è una funzionalità di Sass che permette di utilizzare variabili per generare dinamicamente nomi di selettori e di proprietà. La sintassi dell’interpolazione prevede un carattere cancelletto (hash) seguito da parentesi graffe:

#{}

La direttiva @if

// app.scss

$template: dark;

$bg-dark: #000;
$fg-dark: #999;
$bg-bright: #eeee99;
$fg-bright: #eeee99;

@mixin colors {
    @if $template == dark {
        background-color: $bg-dark;
        color: $fg-bright;
    }
    @if $template == bright {
        background-color: $bg-bright;
        color: $fg-dark;
    }
}

body {
    @include colors;
}

// app.css
body {
    background-color: #000;
    color: #eeee99;
}

La direttiva @if accetta un’espressione Sass e genera un dato blocco di dichiarazioni se l’espressione riporta un qualunque risultato diverso da false o null.

@for, @each e @while

// app.scss
@mixin priority($levels){
    @for $i from 1 to $levels{
        .priority-#{$i - 1}{
            -webkit-order: #{$i - 1};
            order: #{$i - 1};
        }
    }
}
@include priority(6);


// app.css
.priority-0 {
    -webkit-order: 0;
    order: 0;
}
.priority-1 {
    -webkit-order: 1;
    order: 1;
}
.priority-2 {
    -webkit-order: 2;
    order: 2;
}

Con le direttive sopra descritte è possibile effettuare cicli di varia natura.

@for, @each e @while

// app.scss
@each $highlight, $color in (alert: red, quote: green, info: blue) {
	div.#{$highlight} {
		background-color: $color;
	}
}

div.alert {
    background-color: red;
}
div.quote {
    background-color: green;
}
div.info {
    background-color: blue;
}

Con le direttive sopra descritte è possibile effettuare cicli di varia natura.

@for, @each e @while

// app.scss

h1 { font-size: 2.64 em; }
h2 { font-size: 1.98 em; }
h3 { font-size: 1.32 em; }
h4 { font-size: 0.66 em; }

Con le direttive sopra descritte è possibile effettuare cicli di varia natura.

Esercizi

1) Dato il layout nella cartella Esercio Museo:

  • smontare il layout partendo dai JPG con HTML / SCSS / JS

  • in modalità mobile-first

  • a componenti

JavaScript - Lezione 5 - Sass

By Filippo Matteo Riggio

Made with Slides.com

JavaScript - Lezione 5 - Sass

  • 386

More from Filippo Matteo Riggio