Korišćenje miksera u SASS-u
Nakon što deklarišemo mikser
pozivamo ga direktivom @include,
koja mora obavezno da sadrži
ime miksera. Takođe, opciono
mogu da budu parametri i stilovi.
Pogledajmo primer:
@mixin mix{
width: 100px;
height: 100px;
}
div {
@include mix;
padding: 4px;
margin-top: 10px;
}
Rezultat kompilacije:
div {
width: 100px;
height: 100px;
padding: 4px;
margin-top: 10px;
}
Mikseri se mogu pozivati i u korenu dokumenta, ali samo u slučaju kada ne opisuju pravila i u njima nema reference na roditelja. Pogledajte sledeći primer:
@mixin active {
p {
color: #161618;
background-color: red;
}
}
@include active;
Nakon kompilacije videćemo:
p {
color: #161618;
background-color: red;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@mixin font {
font-family:'Courier New', Courier, monospace;
font-size: 12px;
}
#product-card {
@include font;
color: #090957;
font-weight: 600px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@mixin style {
color:#090957;
}
button, link {
@include style;
font-size: 10px;
padding: 4px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@mixin active-text {
font-size: 14px;
font-weight: bold;
text-decoration: underline;
color: blue;
}
#product-card, .active, .content {
@include active-text;
padding: 4px;
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
@mixin size {
font-size: 14px;
padding: 10px;
margin: 4px;
}
@mixin color {
color: #580909;
background-color: #e9e5ab;
}
#product-card {
@include size;
@include color;
width: 600px;
}