sass : 반복문 이용하여 템플릿 스타일링 하기

그동안은 prop으로 받아쓰기 편해서 스타일컴포넌트를 주로 이용하였었다.
이번에 사이드프로젝트를 하며 모듈css로 사용하기로 하며 그래도 css보단 sass가 편하니까 sass로 작업하기로!
(자주 사용하는 스타일을 mixin으로 사용해봤지만 다른것들은 잘 사용하지 않았었다.)

하드로 풀어쓰면...

단계별 카드 스타일을 주고, hover시에도 각 카드별 color를 적용해 주어야 했기에 처음 나열한 코드는 이랬다.

리스트의 단계는 a,b,c,d 가 있다고 한다면

$--a--color : red;
$--b--color : blue;
$--c--color : green;
$--d--color : gray;

.card {

  &.a {
    color: $--a-color;

    .price {
      background-color: $--a-color;
    }

    :hover > .btn {
      background-color: $--a-color;
    }
  }

  &.b {
    color: $--b-color;

    .price {
      background-color: $--b-color;
    }

    :hover > .btn {
      background-color: $--b-color;
    }
  }

  &.c {
    color: $--c-color;

    .price {
      background-color: $--c-color;
    }

    :hover > .btn {
      background-color: $--c-color;
    }
  }

  &.d {
    color: $--d-color;

    .price {
      background-color: $--d-color;
    }

    :hover > .planBtn {
      background-color: $--d-color;
    }
  }
}

같은 형식인데 공통으로 처리할 수 있을 것 같다는 생각이들어 찾아보았다.

@each

1. 객체 변수를 지정해 주고

   $step-color: (
     a: red,
     b: blue,
     c: green,
     d: gray,
   );

2. each를 이용해 반복문처럼 사용할 수 있다는 것!

   .card {
     @each $key, $value in $step-color {
       &.#{$key} {
         color: $value;
   
         .price {
           background-color: $value;
         }
       }
   
       &.#{$key}:hover .btn {
         background-color: $value;
       }
     }
   }

$step-color를 순회하면서 key,value를 사용하여 a,b,c,d 총 네가지의 스타일을 공통적용 해줄 수 있었다.

map-get

map-get($map,$key) 형식으로 줄 수 있다.
만약 color만이 아니고 다른 스타일속성도 함께 바꾸고 싶다면 map-get을 함께 사용하면 가능하다.

1. map으로 객체 변수들을 담아준다.

$step-color: (
  a: (
    color: red,
    width: 10%,
  ),
  b: (
    color: blue,
    width: 20%,
  ),
  c: (
    color: green,
    width: 30%,
  ),
  d: (
    color: gray,
    width: 40%,
  ),
);

2. @each로 $step-color라는 map을 돌면서 map-get()을 이용해 원하는 값을 꺼내준다.

  @each $key, $map in $step-color {
    &.#{$key} {
      width: map-get($map, width);
      color: map-get($map, color);

      .price {
        background-color: map-get($map, color);
      }

      &.#{$key}:hover .btn {
        background-color: map-get($map, color);
      }
    }
  }

만약 $key가 a라면 width: map-get(a:(color: red, width: 10%), width) 가 된다.

---

공부하며 정리&기록하는 ._. 씅로그