Sfruttare appieno le funzionalità di Sass definendo delle classi con delle proprietà da far ereditare ad altre classi
In SASS è possibile definire delle classi con l’unico scopo di estenderle e far ereditare le informazioni (il concetto si avvicina vagamente a quello delle interfacce in Java). Per poter estendere una classe in Sass bisogna utilizzare la parola chiave @extend in questo modo:
.datrevo-text {
color: #ffffff;
text-align: center;
}
.my-text-class {
@extend .datrevo-text;
font-size: 10px;
}
color: #ffffff;
text-align: center;
}
.my-text-class {
@extend .datrevo-text;
font-size: 10px;
}
La classe che verrà generata sarà:
.datrevo-text, .mybox {
color: #ffffff;
text-align: center;
}
.my-text-class {
font-size: 10px;
}
color: #ffffff;
text-align: center;
}
.my-text-class {
font-size: 10px;
}
In questo caso la classe “padre” è stata generata una sola volta come singola classe, per renderla solo estendibile è possibile utilizzare il simbolo della percentuale “%” prima del nome della classe. Al momento della compilazione, Sass sarà in grado di capire che la classe non dovrà essere generata ma sarà utilizzata solo per essere estesa:
%datrevo-text {
color: #ffffff;
text-align: center;
}
.my-text-class {
@extend .datrevo-text; // equivalente a %datrevo-text
font-size: 10px;
}
color: #ffffff;
text-align: center;
}
.my-text-class {
@extend .datrevo-text; // equivalente a %datrevo-text
font-size: 10px;
}
Il file CSS generato sarà il seguente:
.my-text-class {
color: #ffffff;
text-align: center;
font-size: 10px;
}
color: #ffffff;
text-align: center;
font-size: 10px;
}
Ecco l’elenco delle lezioni su Sass:
- Indice
- SASS: un preprocessore per generare file CSS
- Nidificare gli elementi e le proprietà
- Le variabili nei file CSS
- Le classi in Sass
- I file parziali
- Le media query
- La direttiva if
- I cicli for, each e while
- I mixin in Sass
- Differenze tra extend e include (mixin) in Sass
- Compass, un tool di sviluppo per Sass
