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