Mixin'ite kasutamine SASS-is
Pärast mixin'i deklareerimist
kutsume me selle välja direktiiviga @include,
mis peab tingimata sisaldama
mixin'i nime. Samuti võivad selles valikuliselt
olla parameetrid ja stiilid.
Vaatleme näidet:
@mixin mix{
width: 100px;
height: 100px;
}
div {
@include mix;
padding: 4px;
margin-top: 10px;
}
Kompileerimise tulemus:
div {
width: 100px;
height: 100px;
padding: 4px;
margin-top: 10px;
}
Mixin'eid saab välja kutsuda ka dokumendi juures, kuid ainult juhul, kui nad ei kirjelda reegleid ja neis ei ole viidet vanemale. Vaadake järgmist näidet:
@mixin active {
p {
color: #161618;
background-color: red;
}
}
@include active;
Pärast kompileerimist näeme:
p {
color: #161618;
background-color: red;
}
Rääkige, milline on kompileerimise tulemus järgnevast koodist:
@mixin font {
font-family:'Courier New', Courier, monospace;
font-size: 12px;
}
#product-card {
@include font;
color: #090957;
font-weight: 600px;
}
Rääkige, milline on kompileerimise tulemus järgnevast koodist:
@mixin style {
color:#090957;
}
button, link {
@include style;
font-size: 10px;
padding: 4px;
}
Rääkige, milline on kompileerimise tulemus järgnevast koodist:
@mixin active-text {
font-size: 14px;
font-weight: bold;
text-decoration: underline;
color: blue;
}
#product-card, .active, .content {
@include active-text;
padding: 4px;
}
Rääkige, milline on kompileerimise tulemus järgnevast koodist:
@mixin size {
font-size: 14px;
padding: 10px;
margin: 4px;
}
@mixin color {
color: #580909;
background-color: #e9e5ab;
}
#product-card {
@include size;
@include color;
width: 600px;
}