Sass control directives part3 each جملة التكرار

Advanced scss each arabic html

SASS scss – each loop

شكل اخر من جملة التكرار يسهل التعامل معها و لها استعمالات كثيرة حسب شكل الكود و يمكن التعامل معها اذا كان لديك اكثر من شكل لهم نفس المعطيات

SASS – Scss شرح فيديو

شكل مبسط لجملة التكرار

@each $style in (normal, bold, italic) {
  .#{$style} {font-weight: $style;}
}


// form scss to css شكل الناتج
.normal {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.italic {
  font-weight: italic;
}

كيفية التعامل مع جملة التكرار و اكثر من متغير

@each $color-box in red, blue, black {
    ##{$color-box}-style-color{
        color: $color-box;
    }
}

// form scss to css شكل الناتج

#red-style-color {
  color: red;
}

#blue-style-color {
  color: blue;
}

#black-style-color {
  color: black;
}

كيفية التعامل مع جملة التكرار و اكثر من متغير

@each $img in $images {
  .icon-#{$img} {
    background-image: url('/images/#{$img}.jpg');
  }
}

// form scss to css شكل الناتج

.icon-img-one {
  background-image: url("/images/img-one.jpg");
}

.icon-img-two {
  background-image: url("/images/img-two.jpg");
}

.icon-img-three {
  background-image: url("/images/img-three.jpg");
}

  • HTML-CSS
  • each loop sass scss