###### tags: `SCSS`

# SCSS - 字串函式 @each批次新增/ (String Functions)

### Bootstrap [utilities/sizing](https://getbootstrap.com/docs/4.6/utilities/sizing/#relative-to-the-parent) 內建 <kbd>w-25</kbd> <kbd>w-50</kbd> <kbd>w-75</kbd> <kbd>w-100</kbd> 但沒有寫RWD , 要補充這個class , 要去SCSS檔編輯 .

## 一般做法

### 直接在SCSS檔寫,這個問題就是很落落長,有幾個斷點要寫幾個

@media (max-width: 576px) {
	 .w-xs-25 {
		 width: 25% !important;
	}
	 .w-xs-50 {
		 width: 50% !important;
	}
	 .w-xs-100 {
		 width: 100% !important;
	}
}
 @media (min-width: 576px) {
	 .w-sm-25 {
		 width: 25% !important;
	}
	 .w-sm-50 {
		 width: 50% !important;
	}
	 .w-sm-100 {
		 width: 100% !important;
	}
}
 

## 進階做法 SCSS function
### 1.斷點function
#### 斷點RWD蠻多地方都用的到,最好獨立一個 _breakpoint.scss 檔案 ,匯入引用

$media-xs: (max-width:576px);
$media-sm: (min-width:576px);
$media-md: (min-width:768px);
$media-lg: (min-width:992px);
$media-xl: (min-width:1200px);
$media-xxl: (min-width:1400px);

可以寫成


@mixin xs {
  @media (max-width: 576px) {
    @content
  }
}


@mixin sm {
  @media (min-width: 576px) {
    @content
  }
}

@mixin md {
  @media (min-width: 768px) {
    @content
  }
}

@mixin lg {
  @media (min-width: 992px) {
    @content
  }
}

@mixin xl {
  @media (min-width: 1200px) {
    @content
  }
}

@mixin xxl {
  @media (min-width: 1400px) {
    @content
  }
}

### 2.@each批次新增
#### 在[Scss 迴圈計算式](https://hackmd.io/0SnRQ0OxT6yHQCMVy1gcvw) 裡面,提到了

$end:{number};
@for i from {start} through {end} {...... }

不過通常是使用於像mt-1,mt-2,mt-3.....mt-100。但是本次範例w-25,w-50,w-75,w-100如果是用這個做法就會跑出w-1,w-2,w-3......w-99,w-100很不實際。這個時候就需要使用@each批次新增

@import "breakpoint"; 
<!-- 參考前面1.斷點function -->

$size: (25,75,50,100);

@include xs{
@each $width in $size {
  .w-xs-#{$width}{
      width: $width + '%' !important;
  }
}
}

@include sm{
@each $width in $size {
  .w-sm-#{$width}{
      width: $width + '%' !important;
  }
}
}

.
.
.
.
@include xxl{
@each $width in $size {
  .w-xxl-#{$width}{
      width: $width + '%' !important;
  }
}
}

使用線上[scss to css](https://jsonformatter.org/scss-to-css)檔案編譯會得到

@media (max-width: 576px) {
	 .w-xs-25 {
		 width: 25% !important;
	}
	 .w-xs-75 {
		 width: 75% !important;
	}
	 .w-xs-50 {
		 width: 50% !important;
	}
	 .w-xs-100 {
		 width: 100% !important;
	}
}
 @media (min-width: 576px) {
	 .w-sm-25 {
		 width: 25% !important;
	}
	 .w-sm-75 {
		 width: 75% !important;
	}
	 .w-sm-50 {
		 width: 50% !important;
	}
	 .w-sm-100 {
		 width: 100% !important;
	}
}

 @media (min-width: 1400px) {
	 .w-xxl-25 {
		 width: 25% !important;
	}
	 .w-xxl-75 {
		 width: 75% !important;
	}
	 .w-xxl-50 {
		 width: 50% !important;
	}
	 .w-xxl-100 {
		 width: 100% !important;
	}
}

但實際上使用時( 本文在操作時使用REACT ),編譯出來會是

 @media (max-width: 576px) {
	 .w-xs-25 {
		 width: "25%" !important;
	}
	 .w-xs-75 {
		 width: "75%" !important;
	}
	 .w-xs-50 {
		 width: "50%" !important;
	}
	 .w-xs-100 {
		 width: "100%" !important;
	}
}

<span style="color:red;font-size:20px">因為<kbd>$width + '%' </kbd>在Javascript是正確用法,但在SCSS裡面不是,正確用法是使用<kbd>String Functions</kbd></span>

### 3.String Functions

$size: (25,50,100);
$percenarte: '%';
@include xs{
@each $width in $size {
  .w-xs-#{$width}{
      width: $width + unquote($percenarte) !important;
  }
}
}

.
.
.


@include xxl{
  @each $width in $size {
    .w-xxl-#{$width}{
      width: $width + unquote($percenarte) !important;
    }
}
}

才會得到我們要的結果,可以無誤運行使用

### 參考資料
[@each](https://sass-lang.com/documentation/at-rules/control/each)
[sass:string](https://sass-lang.com/documentation/modules/string)