SASS တွင် @each ညွှန်ကြားချက်အတွင်း တန်ဖိုးများစွာ

@each ညွှန်ကြားချက်ကို ပိုမိုရှုပ်ထွေးသော စတိုင်စာရင်းများ ရေးဆွဲရန် အသုံးပြုနိုင်သည်။ ဤသို့ပြုလုပ်ရန် ကိန်းရှင်များစွာကို ထည့်သွင်းရေးသားပြီး အစိတ်အပိုင်းစာရင်းထဲတွင် အပိုတန်ဖိုးများ ထည့်ပေးရမည်။

အောက်ပါဥပမာကို လေ့လာကြည့်ပါမည်:

styles.scss@each $picture, $color, $padding in
  (winter, blue, 10px),
  (spring, green, 12px),
  (summer, yellow, 14px),
  (autumn, brown, 16px) {
    img.#{$picture} {
      background-image: url('/images/#{$picture}.png');
      border: 4px solid $color;
      padding: $padding ;
    }
  }

ပြင်ဆင်ပြီးရလဒ်:

styles.cssimg .winter {
  background-image: url("/images/winter.png");
  border: 4px solid blue;
  padding: 10px;
}

img .spring {
  background-image: url("/images/spring.png");
  border: 4px solid green;
  padding: 12px;
}

img .summer {
  background-image: url("/images/summer.png");
  border: 4px solid yellow;
  padding: 14px;
}

img .autumn {
  background-image: url("/images/autumn.png");
  border: 4px solid brown;
  padding: 16px;
}

တန်ဖိုးများစွာသတ်မှတ်ခြင်းကို အသုံးပြု၍ တန်ဖိုးစုံတွဲများကို စာရင်းထဲသို့ ထည့်နိုင်သည်:

styles.scss@each $elem, $font-size in (div: 14px, p: 12px) {
  #{elem} {
    font-size: $font-size;
  }
}

ယခု ရရှိလာသော ရလဒ်ကို ကြည့်ကြပါစို့:

styles.cssdiv {
  font-size: 14px;
}

p {
  font-size: 12px;
}

styles.scss@each $elem, $size, $color in 
(navbar: 14px blue, link: 12px red, span: 10px green) {
  #{$elem} {
      font-size: $size;
      color: $color;
  }
}