SCSS 활용 팁 11. SCSS 반복문 활용으로 대규모 디자인 시스템 관리하기

작업 프로세스의 효율을 높이고 일관성있는 서비스를 제공하기 위해 디자인 시스템의 중요성이 점점 강조되고 있습니다. SCSS 반복문 (@for, @each, @while)을 활용하면 색상, 폰트 사이즈, 간격 등 다양한 스타일요소를 체계적으로 정의하고, 반복문으로 쉽게 생성할 수 있기 때문에 대규모 디자인 시스템을 효율적으로 관리할 수 있습니다. 

@for

@for는 숫자를 기반으로 반복 실행되며, 시작값부터 끝값까지 증가 혹은 감소합니다.

/* SCSS */
@for $i from 1 through 5 { // 1부터 5까지 반복
  .margin-#{$i} {
    margin: #{$i}rem;
  }
}

/* CSS 출력결과 */
.margin-1 {
  margin: 1rem;
}
.margin-2 {
  margin: 2rem;
}
.margin-3 {
  margin: 3rem;
}
.margin-4 {
  margin: 4rem;
}
.margin-5 {
  margin: 5rem;
}

@each

@each는 리스트나 맵의 항목만큼 순회하며 반복 실행됩니다.

/* SCSS */
$colors: red, blue, green;

@each $color in $colors {
  .bg-#{$color} {
    background-color: $color;
  }
}

/* CSS 출력결과 */
.bg-red {
  background-color: red;
}
.bg-blue {
  background-color: blue;
}
.bg-green {
  background-color: green;
}

@while

@while은 조건이 참인 동안에만 반복 실행됩니다.

/* SCSS */
$i: 1;

@while $i <= 3 {
  .border-#{$i}px {
    border-width: #{$i}px;
  }
  $i: $i + 1;
}

/* CSS 출력결과 */
.border-1px {
  border-width: 1px;
}
.border-2px {
  border-width: 2px;
}
.border-3px {
  border-width: 3px;
}

반복문을 활용한 디자인시스템 관리

반응형 그리드 시스템 만들기

반복문을 활용해 간단하게 그리드 시스템을 구현할 수 있습니다. 

/* SCSS */
@for $i from 1 through 12 {
  .col-#{$i} {
    width: (100% / 12) * $i;
  }
}

/* CSS 출력결과 */
.col-1 {
  width: 8.3333%;
}
.col-2 {
  width: 16.6667%;
}
.col-3 {
  width: 25%;
}
/* ... */
.col-12 {
  width: 100%;
}

색상 팔레트 생성하기

색상 리스트를 정의하고, 반복문을 사용해 클래스를 생성합니다.

/* SCSS */
$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }

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

/* CSS 출력결과 */
.text-primary {
  color: #3498db;
}
.bg-primary {
  background-color: #3498db;
}
.text-secondary {
  color: #2ecc71;
}
.bg-secondary {
  background-color: #2ecc71;
}
.text-danger {
  color: #e74c3c;
}
.bg-danger {
  background-color: #e74c3c;
}

유틸리티 클래스 자동생성하기

마진, 패딩과 같은 유틸리티 클래스를 반복문으로 한번에 생성할 수 있습니다.

/* SCSS */
$sizes: 0, 4px, 8px, 16px;

@for $i from 1 through length($sizes) {
  .m-#{$i} {
    margin: nth($sizes, $i);
  }

  .p-#{$i} {
    padding: nth($sizes, $i);
  }
}

/* CSS 출력결과 */
.m-1 {
  margin: 0;
}
.m-2 {
  margin: 4px;
}
.m-3 {
  margin: 8px;
}
.m-4 {
  margin: 16px;
}
.p-1 {
  padding: 0;
}
.p-2 {
  padding: 4px;
}
.p-3 {
  padding: 8px;
}
.p-4 {
  padding: 16px;
}

결론

위와 같이 @for, @each, @while을 활용하여 디자인 시스템을 제어하면, 코드 중복을 줄일 수 있고 반복된 작업을 자동화 할 수 있어 효율적입니다. 또한 디자인시스템의 변경시 단일 소스만 수정해도 전체 시스템을 업데이트 할 수 있으며, 클래스 네이밍 규칙과 스타일을 체계적으로 관리할 수 있다는 이점도 있습니다.