7. SCSS 반복문

scss를 사용하다 보면 반복문을 사용시 사용안할때 보다 빨리 css구문이 작성될 때가 많다.

예를 들어 margin-top을 10, 20, 30, 40, 50 .... 으로 여러개를 만들어 놓는다고 가정해 보자

클래스명은 mt-10, mt-20 .... 으로 200까지 만든다고 하면 20개의 클래스를 만들어 둘 필요가 생긴다.

이떄 반복문을 사용하여 mt- 이후는 자동 증가하도록 하면 작성해야될 구문이 짧아지고 자동으로 20개의 클래스가 만들어 지도록 작성할 수 있게 된다.

뿐만 아니라 컬러도 미리 만들어 놓은 컬러 값이 있을 경우 텍스트 컬러는 text-[color] 동일한 색의 배경색인 경우 bg-[color] 로 반복문을 사용하여 자동으로 클래스 구문을 생성 할 수 있다.

 

참고 function.scss : ppr(숫자)

4. Basic grammar of SCSS - functions(px to rem automatic conversion)

 

 

사용 방법 1.

for 구문을 사용하여 클래스명-숫자를 자동으로 증가하면서 생성하는 방법

 

CODE ::

@for $i from 0 through 10 {

    .m-#{$i} { margin : ppr($i*8) !important; }

    .mt-#{$i} { margin-top: ppr($i*8) !important; }

    .mb-#{$i} { margin-bottom: ppr($i*8) !important; }

    .ml-#{$i} { margin-left: ppr($i*8) !important; }

    .mr-#{$i} { margin-right: ppr($i*8) !important; }

    .mx-#{$i} { margin-left: ppr($i*8) !important; margin-right: ppr($i*8) !important; }

    .my-#{$i} { margin-top: ppr($i*8) !important; margin-bottom: ppr($i*8) !important; }

    .p-#{$i} { padding: ppr($i*8) !important; }

    .pt-#{$i} { padding-top: ppr($i*8) !important; }

    .pb-#{$i} { padding-bottom: ppr($i*8) !important; }

    .pl-#{$i} { padding-left: ppr($i*8) !important; }

    .pr-#{$i} { padding-right: ppr($i*8) !important; }

    .px-#{$i} { padding-left: ppr($i*8) !important; padding-right: ppr($i*8) !important; }

    .py-#{$i} { padding-top: ppr($i*8) !important; padding-bottom: ppr($i*8) !important; }

}

 

해석 : margin 관련 클래스 6가지와 padding 관련 6가지의 클래스가 0~10까지 11가지가 ㅅ자동 생성 된다.

 

예) .mt-0 : margin-top: 0; ~~ mt-10 : margin-top: 5rem; // 계산 방법 : (1 / 16) * 80

 

작성된 스타일시트는 12라인 이지만 실제 생성된 코드를 보면 12 * 11개인 132 라인이 생성된 것을 볼 수 있을 것이다.

 

참고 : pixel & rem

6. pixel & rem

 

사용 방법 2.

 

each 구문을 사용하여 스타일시트의 [클래스명] + [스타일시트 속성명] + [스타일시트 속성의 값]을 자동으로 생성 할 수 있다.

 

1) 준비 1 : _variables.scss에서 변수와 변수값을 준비 한다.

$white: #ffffff;

$black: #121212;

$dark: #333333;

$blue: #475AF6;

$dark-blue: #215AB6;

$navy: #283497;

$heavy-black: #0e0c0c;

$red: #C51F4E;

$orange: #FF7038;

$orange2: #FF8800;

$pink: #E85780;

$green: #2AB574;

$yellow: #FFC200;

$d-yellow: #FFC338;

$gold: #EFB602;

$gray: #5A5C63;

$light-gray: #878A93;

$placeholder: #999999;

$border: #EAEBEC;

$list-border: #e3e3e3;

$pastel-blue: #E5E8FD;

$pastel-orange: #FFE6D0;

$pastel-green: #DDFBED;

$pastel-yellow: #FFF1C6;

 

2) 준비 2 : 준비된 변수와 변수값을 scss 배열로 만든다.

$colors: (

    white: $white,

    black: $black,

    dark: $dark,

    blue: $blue,

    dark-blue: $dark-blue,

    heavy-black: $heavy-black,

    red: $red,

    orange: $orange,

    orange2: $orange2,

    green: $green,

    gold: $gold,

    pink: $pink,

    gray: $gray,

    light-gray: $light-gray,

    border: $border,

    list-border: $list-border

);

 

3) 스타일시트 생성

 

CODE :

@each $key, $color in $colors {

.text-#{$key} {color: $color;}

}

@each $key, $color in $colors {

.bg-#{$key} {background-color: $color;}

}

 

관리를 위해 폰트 컬러와 백그라운드 컬러를 분리하였다.

 

CODE 해석 ::

- 위 $colors라는 이름의 배열을 불러와서 배열 안쪽에 있는 왼쪽의 초록 텍스트 영역을 $key로 지정하고 오른똑의 변수명을 $color 라는 이름의 변수로 지정한다.

- 생성된 css를 보면  text-[color] {color: [color]; }가 생성되어 있을 것이다.

- 위 변수의 내용으로만 보면 커럴값은 16개인데 위에서 아래로 순서대로 .text-white: #ffffff; 부터 마지막 .text-list-border: #e3e3e3; 까지 16라인씩 텍스트 컬러와 배경 컬러가 생성되어 있을 것이다.