@media-direktiivi SASS:issa
SASS:issa @media-direktiiviä käytetään samalla tavalla kuin
vastaavaa sääntöä CSS:ssä. Sitä voi myös
sisällyttää suoraan kaikkiin CSS-sääntöihin.
On huomionarvoista, että kun sisällytämme
@media-direktiivin CSS-sääntöön, se käännetään jälkeen
nousee ylös tyylitiedostojen yläpuolelle, ja valitsijat,
joihin direktiivi oli sijoitettu, siirretään @media-direktiivin sisään.
Tästä johtuen säännöt voidaan lisätä @media-direktiiviin
ilman valitsijoiden toistamista tai tyylitiedoston virtauksen häiritsemistä.
Katsotaanpa esimerkkiä:
.navbar {
width: 400px;
@media picture and (orientation: portrait) {
width: 300px;
height: auto;
}
}
Katsotaan nyt kääntämisen tulosta:
.navbar {
width: 400px;
}
@media picture and (orientation: portrait) {
.navbar {
width: 300px;
height: auto;
}
}
On myös mahdollista sisällyttää @media-kyselyjä
toisiinsa, ja kääntämisen jälkeen
ne yhdistetään and-operaattorilla:
@media div {
.picture {
@media (orientation: portrait) {
width: 200px;
}
}
}
Tältä se näyttää kääntämisen jälkeen:
@media div and (orientation: portrait) {
.picture {
width: 200px;
}
}
Toinen @media-direktiivin ominaisuus
on, että sen avulla voidaan välittää
muttujia, funktioita ja operaattoreita:
$media: style;
$feature: -webkit-max-device;
$value: 3.0;
@media #{$media} and ($feature: $value) {
div {
color: red;
}
}
Ja tiedostossa style.css saamme seuraavan koodin:
@media style and (-webkit-max-device: 3) {
div {
color: red;
}
}
Kerro, millainen on seuraavan koodin kääntämisen tulos:
.active-link {
color: blue;
@media content {
font-size: 14px;
text-decoration: underline;
}
}
Kerro, millainen on seuraavan koodin kääntämisen tulos:
@media p {
#product-card {
@media (font-family: Arial) {
font-size: 12px;
}
}
#product-card-title {
@media (font-family: Arial) {
font-size: 14px;
font-weight: bold;
}
}
}
Kerro, millainen on seuraavan koodin kääntämisen tulos:
$var: link;
$font: font-size;
$size: 10px;
@media #{$var} and ($font: $size) {
.block {
color: red;
}
}