scss的循环和数组
一、循环：语法
方式1：@for $i from 开始值 through 结束值 包含结束值
方式2：@for $i from 开始值 to 结束值 不包含结束值
1 @for $i from 1 through 3{ 2 .padding-left#{2 * $i + 8}{ 3 padding-left: 2 * $i + 8 + px; 4 } 5 } 6 7 @for $i from 1 to 3{ 8 .margin-left#{2 * $i + 8}{ 9 margin-left: 2 * $i + 8 + px; 10 } 11 } 12 13 /**最终编译结果*/ 14 .padding-left10 { padding-left: 10px; } 15 .padding-left12 { padding-left: 12px; } 16 .padding-left14 { padding-left: 14px; } 17 18 .margin-left10 { margin-left: 10px; } 19 .margin-left12 { margin-left: 12px; }
二、数组：语法
定义数组: $arrayName: a,b,c...;
循环数组: @each $item in $arrayName
在循环里边得到数组索引： index($arrayName，$item)
1 $pixelArr: 5, 15; 2 $position: top, right, bottom, left; 3 @each $item in $pixelArr { 4 $index: index($pixelArr, $item); /**可得到循环的索引*/ 5 .margin-#{$item} { 6 margin: $item + px; 7 border-width: $index + px; 8 } 9 @each $p in $position{ 10 .margin-#{$p}-#{$item}{ 11 margin-#{$p}: $item + px; 12 } 13 } 14 } 15 16 /**最终编译结果*/ 17 18 .margin-5 { 19 margin: 5px; 20 border-width: 1px; } 21 22 .margin-top-5 { 23 margin-top: 5px; } 24 25 .margin-right-5 { 26 margin-right: 5px; } 27 28 .margin-bottom-5 { 29 margin-bottom: 5px; } 30 31 .margin-left-5 { 32 margin-left: 5px; } 33 34 .margin-15 { 35 margin: 15px; 36 border-width: 2px; } 37 38 .margin-top-15 { 39 margin-top: 15px; } 40 41 .margin-right-15 { 42 margin-right: 15px; } 43 44 .margin-bottom-15 { 45 margin-bottom: 15px; } 46 47 .margin-left-15 { 48 margin-left: 15px; }
