scss 반복문 사용하는 방법과 자주쓰는 유용한 반복문

SCSS 반복문 활용: 코드의 간편성과 효율성

SCSS(Sassy CSS)는 CSS의 확장 버전으로, 변수, 중첩 규칙, 믹스인, 함수 등을 제공하여 스타일 시트 작성을 더욱 간결하고 효율적으로 만들어주는 도구입니다. 이 중에서도 SCSS에서 제공하는 반복문은 코드의 재사용성을 높이고 더욱 간편한 스타일링을 가능케 합니다.

SCSS 반복문의 종류

1. @for 문:

@for 문은 특정 횟수만큼 스타일을 반복 적용할 때 사용됩니다. 아래는 간단한 예시입니다.

   @for $i from 1 through 3 {
     .box-#{$i} {
       width: 50px * $i;
     }
   }

위의 코드는 .box-1, .box-2, .box-3 클래스에 각각 다른 너비를 지정합니다.

2. @each 문:

@each 문은 리스트나 맵의 각 항목에 대해 반복 작업을 수행할 때 사용됩니다.

   $colors: red, green, blue;

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

위의 코드는 .text-red, .text-green, .text-blue 클래스에 각각 다른 텍스트 색상을 지정합니다.

SCSS 반복문의 장점

1. 코드 간결성과 가독성 향상:
   반복문을 활용하면 비슷한 패턴의 코드를 한데 묶어 간결하게 표현할 수 있습니다. 이는 가독성을 향상시키고 중복을 줄여 유지보수성을 높입니다.
2. 동적 스타일링 가능:
   변수와 조합하여 동적으로 스타일을 생성할 수 있습니다. 이는 다양한 상황에 유연하게 대응할 수 있도록 도와줍니다.
3. 재사용성 증가:
   반복문을 사용하면 비슷한 스타일 패턴을 여러 곳에서 적용할 수 있어 코드의 재사용성을 높입니다.
4. 효율적인 스타일링:
   여러 엘리먼트에 동일한 스타일을 적용할 때 효과적으로 사용할 수 있어 개발자가 스타일을 보다 효율적으로 관리할 수 있습니다.

SCSS의 반복문은 코드 작성을 더욱 효율적으로 만들어주며, 프로젝트의 스타일을 보다 체계적으로 구성할 수 있도록 도와줍니다.

Sass(SCSS)에서 반복문과 조건문을 사용하는 예시를 제공해보겠습니다. 이 예시에서는 반복문으로 여러 개의 클래스를 생성하고, 조건문을 사용하여 변수에 따라 다른 스타일을 적용하는 방법을 보여줍니다.

$base-color: #3498db;
$num-of-boxes: 5;

@for $i from 1 through $num-of-boxes {
  .box-#{$i} {
    width: 50px * $i;
    height: 50px;
    background-color: $base-color;
    margin-bottom: 10px;
  }
}

$theme: light;

@if $theme == light {
  body {
    background-color: #f9f9f9;
    color: #333;
  }
} @else {
  body {
    background-color: #333;
    color: #f9f9f9;
  }
}

 

이 예시에서는 먼저 @for를 사용하여 1부터 $num-of-boxes까지 반복하면서 .box-1, .box-2, ..., .box-5와 같은 클래스를 생성하고 스타일을 지정합니다. 그 후, @if와 @else를 사용하여 $theme 변수에 따라 두 가지 다른 테마의 스타일을 지정합니다.

이렇게 반복문과 조건문을 활용하면 코드를 더 효율적으로 작성하고 유지보수하기 쉽게 만들 수 있습니다.

 

 

유용한 SCSS 반복문

SCSS에서 유용하게 활용할 수 있는 몇 가지 반복문을 소개하겠습니다. 이 반복문들은 코드의 간결성과 효율성을 높이며, 다양한 상황에서 활용될 수 있습니다.

1. 숫자 반복: @for

@for $i from 1 through 5 {
  .item-#{$i} {
    font-size: 10px + $i * 5;
  }
}

위의 예제는 1부터 5까지의 클래스를 생성하고, 각 클래스에 동적으로 증가하는 font-size를 적용합니다.

2. 색상 리스트 반복: @each

$colors: red, green, blue;

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

이 코드는 미리 정의된 색상 리스트에서 클래스를 생성하고 각 클래스에 해당 색상을 적용합니다.

3. 맵 반복: @each

$font-sizes: (
  small: 12px,
  medium: 16px,
  large: 20px
);

@each $size, $value in $font-sizes {
  .font-#{$size} {
    font-size: $value;
  }
}

이 예시는 맵을 사용하여 각각의 크기에 대한 클래스를 생성하고, 해당 클래스에 지정된 크기를 적용합니다.

4. 배열 반복: @each

$features: flexbox, grid, transitions;

@each $feature in $features {
  .support-#{$feature} {
    content: "Supports #{$feature}";
  }
}

위의 코드는 기능 목록을 반복하여 각각의 기능에 대한 클래스를 생성하고, 해당 클래스에 내용을 추가합니다.

이러한 반복문들을 사용하면 코드를 간결하게 유지하면서도 다양한 스타일을 생성할 수 있습니다. 각 반복문은 프로젝트의 특정 요구에 맞게 유연하게 조정될 수 있습니다.