(documentazione: http://sass-lang.com/documentation/file.SASS_REFERENCE.html )
Sass è un'estensione di CSS che aggiunge potenza ed eleganza a questo linguaggio di base. Esso consente di utilizzare le variabili, regole annidate, mixin, le importazioni in linea, e molto altro, il tutto con una sintassi completamente compatibile CSS.
Sass aiuta a mantenere grandi fogli di stile ben organizzati e ottenere piccoli fogli di stile rapidamente operativi.
Ci sono due sintassi disponibili per Sass: SCSS e Sass
Il primo, noto come SCSS (Sassy CSS) usa le { e i ;
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
Il secondo invece l'accapo e l'indentazione:
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
I file possono essere convertiti automaticamente da una sintassi all'altra utilizzando il sass-convert da riga di comando.
Da riga di comando si lancia il comando di conversione del file .sass a .css:
sass input.scss output.css
Si può anche dire a Sass di stare in ascolto su un file e aggiornare il CSS ogni volta che si modifica il file .sass:
sass --watch input.scss:output.css
o addirittura tutta la cartella:
sass --watch app/sass:public/stylesheets
Sass permette di assegnare dei valori a delle variabili ( col $ )
Le variabili sono valide all’interno dello scope ( { } ) o se esterne sono valide ovunque.
Un modo per renderle globali è specificarlo col !global; (una specie di !important)
La regola interna quindi vale solo per il selettore della regola esterna. Per esempio:
#main p { color: # 00FF00; Larghezza: 97%; .redbox { background-color: # ff0000; color: # 000000; } }
verrà compilata come
#main p { color: # 00FF00; Larghezza: 97%; } #main P .redbox { background-color: # ff0000; color: # 000000; }
questo aiuta a evitare la ripetizione di selettori genitori, e rende i layout CSS complessi con un sacco di selettori nidificati molto più semplice.
a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } }
verrà compilato come
a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; }
Anche la sintassi ad esempio del font può essere resa più stringata:
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
All'interno di una stringa di testo, # {} interpolazione stile può essere utilizzato per inserire valori dinamici all'interno della stringa:
p:before {
content: "I ate #{5 + 10} pies!";
}
Funzioni Sass possono essere chiamate anche usando argomenti a parola chiave esplicita.
p {
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}
È inoltre possibile utilizzare le variabili SassScript a selettori e nomi di proprietà utilizzando la sintassi # {}
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
che diventa:
p.foo {
border-color: blue; }
Proprio come quando viene utilizzato in selettori, & in SassScript si riferisce al selettore di genitori.
In sass esistono le direttive e le espressioni if else :
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
I cicli
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } che diventa: .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
l’each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
che si compila come
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
I Mixins
I Mixins ti permettono di definire degli stili che è possibile ri-usare senza ricorrere a classi non semantiche come float-left ecc
I Mixins possono anche contenere regole CSS, e quant'altro consentito altrove in un documento Sass. Essi possono anche prendere in ingresso degli argomenti e permettono di produrre una grande varietà di stili con poche mixins.
I mixins sono degli insiemi riutilizzabili di proprietà o regole che includono o si “mischiano” con altre regole. Vengono definiti utilizzando la keyword @mixin e vengono inclusi utilizzando la keyword @include.
In questo esempio, sto dicendo a Sass di applicare tutte le proprietà di stile contenute nel mixin highlighted-bold-text a tutti gli elementi span all'interno di .result-with-highlights:
$highlight-color: #ffa; @mixin highlighted-bold-text { font-weight: bold; background-color: $highlight-color; }
.result-with-highlights { span { @include highlighted-bold-text; } }
Arguments
I Mixins possono prendere dei valori SassScript come argomenti, resi disponibili entro il mixin come variabili.
Quando si definisce un mixin, gli argomenti sono scritti come nomi di variabili separati da virgole, il tutto in parentesi dopo il nome. Poi una volta incluso il mixin, i valori possono essere trasmessi nella stessa maniera. Per esempio:
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1px); }
viene compilato come:
p {
border-color: blue;
border-width: 1px;
border-style: dashed; }
Mixins può anche specificare i valori di default per i loro argomenti usando la normale sintassi della impostazione di una variabile.
Poi, quando il mixin è incluso, se non passa in tale argomento, il valore di default viene usato al suo posto. Per esempio:
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
che si compila in
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed; }
Argomenti Chiave
I Mixins puossono anche essere inclusi come argomenti a parola chiave esplicita. Per esempio, l'esempio precedente può essere scritta come:
p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }
E’ meno concisa, ma può rendere il foglio di stile più facile da leggere. Consente inoltre a rendere le interfacce più flessibili, fornendo molti argomenti senza diventare difficile da chiamare.
Argomenti con nome possono essere passati in qualsiasi ordine, e gli argomenti con valori predefiniti possono essere omessi. Dal momento che gli argomenti denominati sono nomi di variabili, underscore e trattini possono essere usati in modo inter-cambiabile.
In pratica, crei un mixin che accetterà una volta richiamato, dei parametri in ingresso:
@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}
h1 {
@include headline(green, 12px);
}
che si compilerà in
h1 {
color: green;
font-size: 12px;
}
#sidebar {
$sidebar-width: 300px;
width: $sidebar-width;
@include smartphone {
width: $sidebar-width / 3;
}
}
I mixins possono anche contenere delle intere regole annidate, non solo delle proprietà. Ecco una versione del familiare hack CSS clearfix implementata in un mixin Sass:
@mixin clearfix { // For modern browsers &:before, &:after { content:""; display:table; } &:after { clear:both; }
// For IE 6/7 (trigger hasLayout) & { zoom:1; } } .group { @include clearfix; }