SASS (solo principi e elementi base)

SASS è un preprocessore HTML.

Preprocessore, perchè ci offre degli strumenti per ottimizzare in fase di  lavoro i nostri  fogli stile, dopodichè li ricompila in CSS puro.

Grazie a”funzioni” e “Mixin”  possiamo creare oggetti complessi richiamabili con un solo comando.

$blu: #2069B4;

$rosso: #cc0000;

$giallo: #ffcc33;

@mixin x-large {font-size: 14px;}

@mixin my-box-blu {
color: #fff;
background:$blu;
border-radius:10px;
display: inline-block;
padding: 10px 25px;
@include x-large}

.my-box-blu{@include my-box-blu}

Inoltre, abbiamo la possibilità di indentare  più regole all'interno di una regola"madre" questo ci aiuta a organizzare più logicamente i nostri css.

senza sass:

.info .body{}
.info .title{}
.info a{}
.info img{}
.info p{}

.correlazioni .body{}
.correlazioni .title{}
.correlazioni a{}
.correlazioni img{}
.correlazioni p{}

con sass:

.info .{
    .body{}
    .title{}
    a{}
    img{}
    p{}
}

.correlazioni {
    .title{}
    a{}
    img{}
    p{}
}