SASS တွင် Mixin များအသုံးပြုခြင်း
Mixin တစ်ခုကိုကြေညာပြီးနောက်
ကျွန်ုပ်တို့သည် ၎င်းကို directive @include ဖြင့်ခေါ်ယူပါသည်။
အဆိုပါ directive သည် Mixin ၏အမည်ကို
ပါဝင်ရန်လိုအပ်ပါသည်။ ၎င်းတွင်ပါရှိနိုင်သည့်
အခြားရွေးချယ်စရာများမှာ parameter များနှင့် style များဖြစ်သည်။
ဥပမာတစ်ခုကိုကြည့်ကြပါစို့။
@mixin mix{
width: 100px;
height: 100px;
}
div {
@include mix;
padding: 4px;
margin-top: 10px;
}
Compile လုပ်ပြီးနောက်ရလဒ်။
div {
width: 100px;
height: 100px;
padding: 4px;
margin-top: 10px;
}
Mixin များကို document ၏ root တွင်လည်းခေါ်ယူနိုင်ပါသည်။ သို့သော် ၎င်းတို့သည် rule များကိုမဖော်ပြသည့်အခါနှင့် parent ကိုကိုးကားခြင်းမရှိသည့်အခါမျိုးတွင်သာဖြစ်သည်။ အောက်ပါဥပမာကိုကြည့်ပါ။
@mixin active {
p {
color: #161618;
background-color: red;
}
}
@include active;
Compile လုပ်ပြီးနောက်ကျွန်ုပ်တို့မြင်ရမည့်အရာ။
p {
color: #161618;
background-color: red;
}
အောက်ပါ code ကို compile လုပ်လျှင်ရလဒ်ကဘာဖြစ်မည်ကိုရှင်းပြပါ။
@mixin font {
font-family:'Courier New', Courier, monospace;
font-size: 12px;
}
#product-card {
@include font;
color: #090957;
font-weight: 600px;
}
အောက်ပါ code ကို compile လုပ်လျှင်ရလဒ်ကဘာဖြစ်မည်ကိုရှင်းပြပါ။
@mixin style {
color:#090957;
}
button, link {
@include style;
font-size: 10px;
padding: 4px;
}
အောက်ပါ code ကို compile လုပ်လျှင်ရလဒ်ကဘာဖြစ်မည်ကိုရှင်းပြပါ။
@mixin active-text {
font-size: 14px;
font-weight: bold;
text-decoration: underline;
color: blue;
}
#product-card, .active, .content {
@include active-text;
padding: 4px;
}
အောက်ပါ code ကို compile လုပ်လျှင်ရလဒ်ကဘာဖြစ်မည်ကိုရှင်းပြပါ။
@mixin size {
font-size: 14px;
padding: 10px;
margin: 4px;
}
@mixin color {
color: #580909;
background-color: #e9e5ab;
}
#product-card {
@include size;
@include color;
width: 600px;
}