# scss 迴圈與內容

在寫成模組化的mixin之前，可以先寫一個簡單版本的css，再把他變成可以模組化的mixin
最後要做成像這樣的成果

### 單個禮物盒的基本設定
結構部分，分為禮物盒、水平緞帶、垂直緞帶、盒子上蓋，先用css把效果寫出來，再把需要加入變數的地方提取出來變成模組。

.present {
	width: 100px;
	height: 100px;
	background-color: #e03864;
	position: relative;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
	.vribbon, .hribbon {
		background-color: #fff;
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
	}
	.vribbon {
		width: 15%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
	.hribbon {
		width: 100%;
		height: 15%;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.cap {
		width: 100%;
		height: 15%;
		background-color: #e03864;
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 0;
		top: 0;
	}
}

### 將禮物盒作為模組使用mixin加上參數

修改完後會變成下列的模組，把尺寸、禮物盒顏色、緞帶色、旋轉的角度，這樣就可以再呼叫模組時，加入自定義的參數，創造出不同大小、顏色、旋轉角度的禮物盒。

    @mixin present($size: 100px,$bodyColor: #e03864,$ribbonColor: #fff,$rotate: 5deg) {
	width: $size;
	height: $size;
	background-color: $bodyColor;
	position: relative;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
	transform: rotate($rotate);
	.vribbon,
	.hribbon {
		background-color: $ribbonColor;
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
	}
	.vribbon {
		width: 15%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
	.hribbon {
		width: 100%;
		height: 15%;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.cap {
		width: 100%;
		height: 15%;
		background-color: $bodyColor;
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 0;
		top: 0;
	}
}

.present {
	@include present;
}

### 在禮物盒mixin加上隨機參數
現在基本的mixin模組已經製作完成，接下來就要看怎麼把這些參數變成隨機的。

1. 首先先產生多個禮物的html結構，提供一個pug emmet語法

.present$*20>.cap+.vribbon+.hribbon

2. 在這邊`$`代表變數，會產生從1~x的數值，上方的語法則會產生20個禮物盒的html結構

.present1
	.cap 
	.vribbon 
	.hribbon 
.present2
	.cap 
	.vribbon 
	.hribbon 
.....

3. 在scss的部分，則使用for迴圈從1跑到20，特別注意如果要使變數變成純文字，必須用`#{}`將變數包在裡面

@for $i from 1 through 50{
    .present#{$i}{
		@include present;
	}
}

4. 最後，要將在迴圈內定義變數，限定變數範圍，**變數有分全域變數或區域變數，若是定義在某個calss內的變數，外面就取不到變數值**，並且利用random來產生隨機數值。 `random(50)`代表會產生一組由0~50的隨機數字

我們要產生隨機數值得有:尺寸、旋轉角度、禮物盒顏色、緞帶顏色

- 尺寸隨機($size)：random(50) +50 //產生50~100px的尺寸
- 旋轉角度隨機($rotate)：random(20) -10 //產生-10~10的旋轉角度
- 禮物盒、緞帶顏色隨機($bodycolor)：必須用到scss陣列與nth製作

顏色隨機:先定義好每個顏色的變數，再把變數加進scss的陣列(List)內，

    //利用陣列來記錄幾組常用的顏色
    $colorWhite:#fff;
    $colorPurple:#9d73ba;
    $colorRed:#e03864;
    $colorYellow:#eaa40b;
    $colorGreen:#8cdba4;
    
    //利用陣列來記錄幾組常用的顏色，這邊注意scss的陣列是用()包起來的
    $colors:($colorWhite,$colorPurple,$colorRed,$colorYellow,$colorGreen);
    

在使用$colors陣列時，會透過nth(變數, 索引)來取得資料

    第一個微陣列裡的值，第二個為索引，所以會隨機取得陣列裡的1-5其中一個變數
    $bodyColor: nth($colors,random(5));

最後避免禮物盒顏色與緞帶顏色同色，用`@if` 來判斷，如果禮物盒的顏色與緞帶顏色相同，緞帶就重新跑一次random

    // 利用陣列來記錄幾組常用的顏色
        $colorWhite:#fff;
        $colorPurple:#9d73ba;
        $colorRed:#e03864;
        $colorYellow:#eaa40b;
        $colorGreen:#8cdba4;
        $colors:($colorWhite,$colorPurple,$colorRed,$colorYellow,$colorGreen);
        
   
    @for $i from 1 through 50 {
        //定義區域變數
        $size: random(50) + 50;
        $bodyColor: nth($colors,random(5));
        $ribbonColor: nth($colors,random(5));
        $rotate: random(20) - 10;

        //如果盒子的顏色跟緞帶的顏色一樣，就重新產生緞帶顏色
        @if ($bodyColor == $ribbonColor){
            $ribbonColor: nth($colors,random(5));
        }
        
	
    //使用方式
        .present#{$i}{
            @include present(#{$size}px,$bodyColor,$ribbonColor,#{$rotate}deg);
        }
    }

[codepen範例連結](https://codepen.io/abbyd0208/pen/abBLpXj?editors=1100)

###### tags: `scss`