SASS Scss – for loop

جملة التكرار من الجمل التي يكثر استعمالاتها في اجزاء كثيرة و هي تلخص كيفية التعامل مع شكل معين لة تقريبا نفس الاسم و لكن الناتج يكون متغير حسب شكل التكرار

SASS – Scss شرح فيديو

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

$class-name: box !default;
@for $i from 1 through 5{
  .#{$class-name}-#{$i}{
    width: 50px + $i
	}
}

// form scss to css شكل الناتج
.box-1 {
  width: 51px;
}

.box-2 {
  width: 52px;
}

.box-3 {
  width: 53px;
}

.box-4 {
  width: 54px;
}

.box-5 {
  width: 54px;
}

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

$list: #aaa, #bbb, #ccc, #ddd;

@for $i from length($list)*-1 through -1 {
  .box:nth-child(#{abs($i)}) {
    color: nth($list, $i);
  }
}

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

.box:nth-child(4) {
  color: #aaa;
}

.box:nth-child(3) {
  color: #bbb;
}

.box:nth-child(2) {
  color: #ccc;
}

.box:nth-child(1) {
  color: #ddd;
}

كيفية عمل قالب متجاوب فريم وورك

@for $i from 1 through 8 {
    $width: percentage(1 / $i);

    .col-#{$i} {
        width: $width;
    }
}

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

.col-1 {width: 100%;}
.col-2 {width: 50%;}
.col-3 {width: 33.333%;}
.col-4 {width: 25%;}
.col-5 {width: 20%;}
.col-6 {width: 16.666%;}
.col-7 {width: 14.285%;}
.col-8 {width: 12.5%;}

framework شكل اخر

$total-columns: 6;

$col-widths: ();
@for $i from 1 through $total-columns {
    @for $j from 1 through $i {
        $w: ($j/$i);

        @if not index($col-widths, $w) {
            .col-#{$j}-#{$i} {
                width: $w * 100%;
            }

            $col-widths: append($col-widths, $w, comma);
        }
        
    }
}

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

.col-1-1 { width: 100%; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.33333%; }
.col-2-3 { width: 66.66667%; }
.col-1-4 { width: 25%; }
.col-3-4 { width: 75%; }
.col-1-5 { width: 20%; }
.col-2-5 { width: 40%; }
.col-3-5 { width: 60%; }
.col-4-5 { width: 80%; }
.col-1-6 { width: 16.66667%; }
.col-5-6 { width: 83.33333%; }