6. SASS, @for 과 @if 를 활용한, 스타일링 지정

테스트 페이지를 작성할때

<components / test-number / test-number-testing.tsx>  

  const TestNumberTesting = () => {
      const allNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];

      const numberTestCards = allNumbers.map((selected) => (
        <div className={styles[`number__${selected}`]}>{selected}</div> //  각 값마다 다른 style
			...

처럼 각 값마다

    className = { styles.number__1 }
    className = { styles.number__2 }
    className = { styles.number__3 }
    className = { styles.number__4 }
       ...

처럼 다른 스타일을 지정해야 했다.

 

참고 : "string" 으로 되어있는 값을 styles."string" 처럼 사용하고 싶다면 styles["string"] 을 사용하면된다.

 

만약 CSS 로 스타일을 지정했다면

< CSS >
    . styles.number__1{
        ...
    } 
    . styles.number__2{
        ...
    } 

        ...

이런식으로 지정해야했을 테지만 나는 SASS 를 사용한다!

 

 

SASS 의 @FOR 과 @if 를 사용하여, 작성해보자.

@for $i from 0 through 9 {
    .number__#{$i} {            // 공통부분
        font-size: 5rem;
   			...
        padding: 0;
        @if ($i == 0) {          // 다른부분 적용
            color: rgb(38, 144, 24);
        }
        @if ($i == 1) {
            color: rgb(246, 48, 48);
        }
        ...

1. @for 을 사용할때, from 과 through 를 통해, 반복의 시작과 끝값 을 정하고

2.   $i 로 index를 설정한다.

3. 내부에서 사용할때 공통부분은,

4.  .number__#{$i} 로 모든 부분이 적용될 것을 적용하고

5.  @if  를 통해서, 다른 부분에 대해서만 따로 적용시킨다.