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;
  }
}