Direktiva @media u SASS-u
U SASS-u direktiva @media se primenjuje na isti način kao i
odgovarajuće pravilo u CSS-u. Takođe se može
ugnezdirati direktno u bilo koje CSS pravilo.
Treba napomenuti da u slučaju kada ugnezdimo
direrktivu @media u CSS pravilo, nakon kompilacije
ona se podiže na vrh stilskih tabela, a selektori,
u kojima je direktiva bila smeštena, premeštaju se unutar @media.
Iz ovoga proizilazi da se pravila mogu dodavati u direktivu @media
bez ponavljanja selektora ili narušavanja toka stilske tabele.
Pogledajmo primer:
.navbar {
width: 400px;
@media picture and (orientation: portrait) {
width: 300px;
height: auto;
}
}
Sada pogledajmo rezultat kompilacije:
.navbar {
width: 400px;
}
@media picture and (orientation: portrait) {
.navbar {
width: 300px;
height: auto;
}
}
Takođe postoji mogućnost ugnežđavanja @media upita
jedan u drugi, a nakon kompilacije
oni se spajaju operatorom and:
@media div {
.picture {
@media (orientation: portrait) {
width: 200px;
}
}
}
Evo šta ćemo videti nakon kompilacije:
@media div and (orientation: portrait) {
.picture {
width: 200px;
}
}
Još jedna osobenost direktive @media
je ta što se pomoću nje mogu proslediti
promenljive, funkcije i operatori:
$media: style;
$feature: -webkit-max-device;
$value: 3.0;
@media #{$media} and ($feature: $value) {
div {
color: red;
}
}
I u fajlu style.css dobijamo sledeći kod:
@media style and (-webkit-max-device: 3) {
div {
color: red;
}
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
.active-link {
color: blue;
@media content {
font-size: 14px;
text-decoration: underline;
}
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@media p {
#product-card {
@media (font-family: Arial) {
font-size: 12px;
}
}
#product-card-title {
@media (font-family: Arial) {
font-size: 14px;
font-weight: bold;
}
}
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
$var: link;
$font: font-size;
$size: 10px;
@media #{$var} and ($font: $size) {
.block {
color: red;
}
}