Articles
SASS/SCSS 소개
SASS에서 반복문 사용

SASS에서 반복문 사용

이 글에서는 SASS에서 반복문을 처리하는 방법을 설명합니다.

실제 코드 예시를 사용해 SASS에서 반복문을 구현하는 방법을 단계별로 설명하겠습니다.

YouTube Video

SASS에서 반복문 사용

SASS에서 반복문을 사용하면 코드 중복을 피할 수 있고, 유연하고 재사용 가능한 스타일을 작성할 수 있습니다.

SASS에서 반복문을 사용하는 이유

반복문을 사용하면 다음과 같은 여러 가지 장점이 있습니다:.

  • 코드의 재사용성이 향상되어, 유사한 패턴의 스타일을 쉽게 생성할 수 있습니다.
  • 유지보수성이 향상되어, 스타일을 한 번에 수정하기가 쉬워집니다.
  • 또한 오류를 줄일 수 있습니다.

예를 들어, 다양한 색상의 버튼이나 여러 크기의 컴포넌트 스타일을 한 번에 생성할 수 있습니다.

SASS에서 반복문에 사용하는 문법

SASS에서 반복문에 주로 사용하는 문법은 다음과 같습니다:.

  • @for를 사용하면 지정한 숫자 범위에 대해 반복 처리할 수 있습니다.
  • @each를 사용하면 리스트나 맵(지도) 요소에 대해 반복할 수 있습니다.
  • @while은 특정 조건이 충족될 때까지 반복문을 실행합니다.

@for를 사용한 반복문

@for는 지정한 숫자 범위에 따라 반복 처리를 실행합니다.

문법 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • 와 에는 반복의 시작 값과 끝 값을 지정합니다. to를 사용하면 끝 값이 포함되지 않고, through를 사용하면 끝 값이 포함됩니다.

예시

다음 코드는 1px씩 두께가 늘어나는 테두리 클래스를 자동으로 생성합니다.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • 이 코드는 테두리 두께가 1px씩 증가하는 클래스를 자동으로 만듭니다. 여기서는 @for 지시어를 사용해 1부터 5까지 반복합니다.

생성된 CSS 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • .border-1부터 .border-5까지의 클래스가 순차적으로 생성되며, 각 클래스의 테두리 두께는 1px씩 증가합니다.

@each를 사용한 반복문

@each는 리스트 또는 맵을 사용하여 반복문을 실행합니다. 반복되는 패턴의 클래스를 효율적으로 생성하고 싶을 때 유용합니다.

문법 

1/*
2@each $item in <list> {
3  ...
4}
5*/

예시 1: 리스트 사용

다음 코드는 여러 텍스트 색상 클래스를 생성합니다.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • 이 코드는 리스트에 있는 각 색상마다 텍스트 색상 클래스를 자동으로 생성합니다. @each 지시어를 사용하여 리스트의 각 값을 순차적으로 처리합니다.

생성된 CSS 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • SASS 파일을 CSS로 컴파일하면, 리스트에 있는 각 색상에 대해 .text-red, .text-blue, .text-green과 같은 클래스가 생성됩니다.

예시 2: 맵 사용

맵을 사용하면 키와 값을 쌍으로 처리할 수 있습니다. 다음 예시에서는 버튼 배경색을 맵으로 정의합니다.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

생성된 CSS 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • SASS 파일을 CSS로 컴파일하면, 맵에 있는 각 키에 대해 .bg-primary, .bg-success, .bg-danger와 같은 클래스가 생성됩니다.

@while을 사용한 반복문

@while은 조건이 참인 동안 반복문을 계속 실행합니다.

문법 

1/*
2@while <condition> {
3  ...
4}
5*/

예시

예를 들어, 글꼴 크기를 단계별로 증가시키고 싶을 때 아래와 같이 작성할 수 있습니다:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • 글꼴 크기를 단계적으로 증가시킬 때 @while 지시어를 활용해서 반복 처리를 할 수 있습니다. 변수 $i를 사용해 1부터 5까지 값에 대해 클래스가 자동으로 생성됩니다.

생성된 CSS 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • SASS 파일을 CSS로 컴파일하면, 1rem부터 5rem까지 글꼴 크기가 증가하는 클래스들이 자동으로 생성됩니다.

고급 예시: 반복문과 중첩의 조합

반복문과 SASS의 중첩 기능을 조합하면 더욱 고급스러운 스타일 생성을 할 수 있습니다.

예시

아래는 버튼의 배경색과 hover 색상을 함께 정의한 예시입니다.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • 반복과 SASS 중첩을 결합하면 버튼 배경색과 호버 색상을 한 번에 생성할 수 있습니다. 맵의 각 색상에 대해 .btn- 클래스를 생성하고, 중첩을 사용하여 :hover 스타일을 정의합니다.

생성된 CSS 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • SASS 파일을 CSS로 변환하면 각 버튼의 배경색과 호버 색상이 자동으로 생성되며, :hover 스타일은 중첩을 사용하여 함께 정의됩니다.

반복문을 사용할 때 주의할 점

반복문을 사용할 때 아래의 사항을 유념하여 더 효율적이고 읽기 쉬운 코드를 작성하세요.

  1. 너무 깊은 중첩을 피하세요 과도한 중첩은 가독성을 떨어뜨리므로 최소한으로만 사용하세요.

  2. 성능에 영향이 있는지 고려하세요 반복문으로 너무 많은 클래스가 생성되면, CSS 파일이 불필요하게 커질 수 있습니다.

  3. 적절한 변수명을 사용하세요 $i, $item과 같은 변수는 코드의 의미를 쉽게 알 수 있도록 명확한 이름을 사용하세요.

요약

SASS에서 반복문을 활용하면 효율적이고 유지보수하기 쉬운 스타일을 설계할 수 있습니다. 특히, @for, @each, @while을 상황에 맞게 선택하면 동적이고 유연한 CSS를 생성할 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

SASS의 `if` 함수