[ SASS/SCSS 입문 ] Sass 조건문과 반복문

 

 

웹 개발에서 스타일 시트의 역할은 매우 중요합니다. 

사용자 경험을 극대화하는 효과적인 스타일링은 

웹사이트나 애플리케이션의 성공에 결정적인 요소가 될 수 있습니다. 

 

이런 맥락에서, Sass(SCSS)는 개발자들에게 CSS를 

더욱 동적이고 유연하게 작성할 수 있는 기능을 제공합니다. 

특히, Sass의 조건문과 반복문은 스타일 시트의 재사용성과 유지보수성을 

크게 향상시킬 수 있는 강력한 기능입니다. 

 

이번 글에서는 Sass의 조건문과 반복문 사용법을 알아보고, 

이를 활용한 동적 스타일링 전략에 대해 살펴보겠습니다.

 

 

 

조건문의 구조와 사용 시나리오

---

 

Sass의 조건문은 특정 조건에 따라 다른 스타일을 적용할 수 있게 해줍니다. 

이는 웹사이트나 애플리케이션의 테마, 레이아웃, 또는 기능적 요소들을 

동적으로 변경하는 데 매우 유용합니다. 

조건문은 @if, @else if, @else 키워드를 사용하여 구성됩니다.

 

 

@if, @else if, @else를 사용한 예제

$theme: dark;

body {
  @if $theme == dark {
    background-color: black;
    color: white;
  } @else if $theme == light {
    background-color: white;
    color: black;
  } @else {
    background-color: gray;
    color: darkgray;
  }
}

 

이 예제에서는 $theme 변수의 값에 따라 다른 스타일을 적용합니다. 

이러한 방식으로, 사이트의 테마를 동적으로 변경하는 것이 가능해집니다.

 

 

 

반복문 (@for, @each, @while)의 사용법과 차이점

---

 

반복문은 코드의 재사용성을 높이고, 개발 시간을 단축시켜 주며, 유지보수를 용이하게 합니다. 

Sass의 세 가지 반복문 @for, @each, @while의 사용법과 차이점에 대해 알아보겠습니다.

 

 

@for 반복문

@for 반복문은 지정된 횟수 동안 스타일 규칙을 반복해서 출력합니다.

@for은 두 가지 형태로 사용할 수 있습니다

 

from through

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

 

이 코드는 .item-1, .item-2, .item-3 클래스를 생성합니다. 

여기서 $i는 1부터 시작하여 3까지 포함하여 반복됩니다.

 

 

from to

반면, from to 구문을 사용하면, 시작 값에서 끝 값 직전까지 반복합니다. 

즉, 끝 값은 반복에 포함되지 않습니다.

 

@for $i from 1 to 4 {
  .item-#{$i} { width: 100px * $i; }
}

 

이 코드도 .item-1, .item-2, .item-3 클래스를 생성하지만, 

$i의 값이 4에 도달하기 직전까지만 반복하므로, 

실제로는 1부터 3까지의 값을 가지는 클래스가 생성됩니다.

 

 

 

UI 구성 요소(예: 리스트, 그리드 시스템)를 생성하기 위한 반복문 활용

---

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

 

이 예제에서는 @for 반복문을 사용하여 간단한 그리드 시스템을 생성합니다. 

이러한 방식으로 반복문을 활용하면, 코드의 양을 크게 줄이면서 

다양한 UI 구성 요소를 효율적으로 생성할 수 있습니다.

 

 

 

조건문과 반복문을 사용할 때의 성능 고려 사항

---

 

Sass의 조건문과 반복문은 매우 유용하지만, 

너무 많이 사용하면 컴파일 시간이 길어지고 최종 CSS 파일의 크기가 커질 수 있습니다. 

따라서, 이러한 기능들을 적절히 사용하는 것이 중요합니다. 

조건문과 반복문을 사용할 때 다음과 같은 성능 고려 사항을 염두에 두어야 합니다.

 

• 최소한으로 사용하기: 필요한 경우에만 조건문과 반복문을 사용하고, 가능하다면 CSS의 기본 기능과 정적인 스타일링을 우선적으로 고려하세요.
• 복잡성 관리: 너무 복잡하거나 중첩된 조건문과 반복문은 코드의 가독성을 떨어뜨리고, 유지보수를 어렵게 만듭니다. 간단하고 명확하게 로직을 구성하세요.
• 컴파일 시간 최적화: Sass를 사용할 때는 컴파일 시간도 고려해야 합니다. 개발 환경에서는 문제가 되지 않을 수 있지만, 프로덕션 환경으로 이동할 때는 컴파일된 CSS의 크기와 성능이 중요해집니다.
• 테스트와 리팩토링: 조건문과 반복문을 사용한 후에는 반드시 결과물을 테스트하고, 필요한 경우 리팩토링을 통해 성능을 개선하세요.

 

조건문과 반복문을 효과적으로 사용하면, 

Sass의 강력한 기능을 최대한 활용하여 동적이고 유연한 스타일링을 구현할 수 있습니다. 

이러한 기능들은 개발자가 반복적인 작업을 줄이고, 

코드의 재사용성과 유지보수성을 높이는 데 큰 도움이 됩니다. 

하지만, 성능에 미치는 영향을 항상 고려하면서 적절한 사용량을 찾는 것이 중요합니다.

 

Sass의 조건문과 반복문을 사용하여 보다 

효율적이고 유연한 스타일 시트를 작성하는 방법을 알아보았습니다. 

이러한 기능들을 적절히 활용하면, 웹 개발 과정에서 생산성을 높이고, 

사용자 경험을 개선하는 데 크게 기여할 수 있습니다. 

 

여러분의 프로젝트에서도 이러한 Sass의 기능을 적극적으로 활용해보시기 바랍니다.