Hi 终於来到第15天了(一半了!!!)
今天要写的是关於Sass-Loop回圈，回圈很常与前几天介绍Lists与Maps一起使用～

@for

@for <变数> from <起始值> through <终止值>{}
@for <变数> from <起始值> to <终止值>{}

*through为有包含终止值 ; to则为不包含终止值

简而言之，@for是起始值跑到终止值的回圈，我们直接来看例子：

@for $i from 1 through 5 {
  .h-#{$i} {
    font-size: (5 - $i + 1) * 10px;
  }          //简单的四则运算，使值不等於0
}

其中 $i 为变数，1为起始值，5为终止值，#{}括号中的内容会被Sass编译
回圈会由变数=1、变数=2...直到变数=5，
编译出来的css结果会变成

.h-1 { font-size: 50px; }
.h-2 { font-size: 40px; }
.h-3 { font-size: 30px; }
.h-4 { font-size: 20px; }
.h-5 { font-size: 10px; }

@each

@each <变数> in < list >{}
@each <变数> in < map >{}

简而言之，@each是将list或map每个项目都跑过一次的回圈，
我们直接来看例子：

list

$font-size: 10px, 25px, 40px; //list型态
@each $size in $font-size {
  .size-#{$size} {
    font-size: $size;
  }
}

其中 $size 为变数，#{}括号中的内容会被Sass编译，
回圈会将list中的每个项目都跑过一次，
编译出来的css为

.size-10px { font-size: 10px; }
.size-25px { font-size: 25px; }
.size-40px { font-size: 40px; }

map

$color-array: (
  red: #E65165,
  green: #51E671,
  blue: #51E671
);  //map型态
@each $key, $value in $color-array {
  .bg-#{$key} {
    background: $value;
  }
}

其中 $color-array 为map型态的变数，map可以同时取得key与value的值，
#{}括号中的内容会被Sass编译，回圈会将map中的每个key都跑过一次，
编译出来的css为

.bg-red { background: #E65165; }
.bg-green { background: #51E671; }
.bg-blue { background: #51E671; }

今天就先到这边罗，有机会再分享更多Loop的笔记！

参考资料：
https://timchen0607.medium.com/scss-%E9%82%A3%E4%BA%9B%E5%B9%B4%E6%88%91%E5%80%91%E4%B8%80%E8%B5%B7%E8%B7%91%E7%9A%84%E8%BF%B4%E5%9C%88-c366984fc7f0