SASS ရှိ mixins များအတွင်း အကြောင်းအရာ ဘလောက်များ

Mixins အတွင်းရှိ စတိုင်ဘလောက်များကို လွှဲပြောင်းရန် @content ညွှန်ကြားချက်ကို အသုံးပြုပါမည်။ ထိုနေရာတွင် ကျွန်ုပ်တို့လိုအပ်သော စတိုင်များ ထည့်သွင်းမည်ဖြစ်သည်။

ဥပမာတစ်ခုကို ကြည့်ရှုကြပါစို့။

styles.scss@mixin active {
  * div {
    @content;
  }
}

@include active {
  #block {
    color: red;
  }
}

ကမ္ပလိုက်အဖြစ် ပြောင်းလဲပြီးနောက် ရလဒ်။

styles.css* div #block {
  color: red; 
}

သိထားရမည့်အချက်မှာ @content ညွှန်ကြားချက်ကို တစ်ကြိမ်ထက်ပို၍ သို့မဟုတ် loop အတွင်းတွင် ဖော်ပြပါက၊ စတိုင်ဘလောက်များကိုလည်း အကြိမ်အရေအတွက်အတိုင်း ခေါ်ယူသွားမည်ဖြစ်သည်။

styles.scss@mixin active {
  div {
    @content;
  }
navbar {
    @content;
  }
}
@include active {
  #block {
    color: red;
  }
  button {
    color:green;
  }
}

ကမ္ပလိုက်အဖြစ် ပြောင်းလဲပြီးနောက် ကျွန်ုပ်တို့ မြင်ရမည်မှာ။

styles.cssdiv #block {
  color: red; 
}
div button {
  color: green; 
}

navbar #block {
  color: red; 
}
navbar button {
  color: green; 
}

styles.scss@mixin super-link {
  a {
    @content;
  }
}
@include super-link {
  color: blue;
  text-decoration: underline;
}

styles.scss@mixin super-link {
  a {
    @content;
  }
  a .primary-link{
    @content;
    font-weight: bold;
  }
}
@include super-link {
  color: blue;
  text-decoration: underline;
}

styles.scss@mixin colors {
  ...
}