SASS의 `if` 함수
이 글은 SASS의 if 함수를 설명합니다.
이 글에서는 if 함수의 기초부터 고급 기법까지 단계별로 살펴보겠습니다.
YouTube Video
SASS의 if 함수
if() 함수는 불리언 조건에 따라 두 값 중 하나를 반환하는, SASS가 제공하는 단순한 조건 함수입니다. JavaScript의 삼항 연산자와 유사합니다.
문법
문법은 다음과 같습니다:.
1// if(condition, trueValue, falseValue)condition이 true이면trueValue를, false이면falseValue를 반환합니다.
기본 사용법
예를 들어, 테마가 다크인지 라이트인지에 따라 배경색과 텍스트 색을 바꾸기 위해 if() 함수를 사용할 수 있습니다.
샘플 코드
1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7 background-color: $background-color;
8 color: $text-color;
9}$theme변수가"dark"이면 배경은 검정, 텍스트는 흰색이 되고,"light"이면 배경은 흰색, 텍스트는 검정이 됩니다.
생성된 CSS
1body {
2 background-color: black;
3 color: white;
4}$theme변수가"dark"이므로 배경은 검정, 텍스트는 흰색입니다.
@if 문과 if() 함수의 차이점
Sass는 조건 분기를 위해 @if 문과 if() 함수를 제공하지만, 두 가지는 서로 다른 목적에 사용됩니다.
샘플 코드
1$theme: "dark";
2
3// `@if` statement: Compile-time branching (syntax level)
4$background-color: null;
5@if $theme == "dark" {
6 $background-color: black;
7} @else if $theme == "light" {
8 $background-color: white;
9} @else {
10 $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17 background-color: $background-color;
18 color: $text-color;
19}@if문은 Sass 컴파일 시 어떤 코드가 출력될지를 제어합니다.- 반면
if()함수는 값을 반환하며, 표현식 내부에서 값을 동적으로 전환하는 데 사용됩니다.
생성된 CSS
1body {
2 background-color: black;
3 color: white;
4}- 이 예시에서는
$theme가"dark"이므로 검은 배경과 흰색 텍스트 색상이 적용됩니다. - 두 가지 주요 차이점은
@if문은 구조를 제어하고,if()함수는 값을 반환한다는 점입니다.
중첩된 if 함수 사용
복잡한 분기가 필요할 때는 if 함수를 중첩해서 사용할 수 있습니다.
샘플 코드
1$theme: "custom";
2$custom-color: blue;
3
4$background-color: if(
5 $theme == "dark",
6 black,
7 if(
8 $theme == "light",
9 white,
10 $custom-color
11 )
12);
13
14body {
15 background-color: $background-color;
16}$theme가"dark"이면 검정을,"light"이면 흰색을 반환하고, 그 외에는 기본값($custom-color)을 반환합니다.
생성된 CSS
1body {
2 background-color: blue;
3}$theme변수가custom이므로 배경색은 파란색입니다.
실용적인 활용 사례
테마 전환
아래는 테마에 따라 버튼 스타일을 변경하는 예시입니다.
1$theme: "dark";
2
3.button {
4 background-color: if($theme == "dark", #333, #fff);
5 color: if($theme == "dark", #fff, #333);
6 border: 1px solid if($theme == "dark", #444, #ccc);
7}- 이 코드는
$theme변수의 값에 따라 버튼의 배경, 텍스트, 테두리 색을 전환하는 SASS 조건문 예제입니다.if()함수를 사용하여 다크/라이트 테마에 맞게 스타일을 동적으로 설정합니다.
생성된 CSS
1.button {
2 background-color: #333;
3 color: #fff;
4 border: 1px solid #444;
5}- 테마를 전환하면 전체 디자인을 일관되게 변경할 수 있습니다.
고급 예제: 색 대비를 동적으로 설정하기
배경색에 따라 텍스트 색을 자동으로 설정하는 예제를 살펴보겠습니다.
샘플 코드
1@use "sass:color";
2
3$background-color: #000;
4
5$text-color: if(
6 color.channel($background-color, "lightness", $space: hsl) > 50%,
7 black,
8 white
9);
10
11body {
12 background-color: $background-color;
13 color: $text-color;
14}color.channel()함수는 배경색의 명도(lightness)를 얻는 데 사용됩니다. 그 값이50%보다 크면 검은색을, 작으면 흰색을 텍스트 색으로 선택하여 배경과의 대비를 자동으로 최적화합니다.
생성된 CSS
1body {
2 background-color: #000;
3 color: white;
4}if()함수를 사용하면 대비 조정 등 디자인 접근성을 고려한 유연한 스타일을 구현할 수 있습니다.
@function과 결합하기
@function 내부에서 if 함수를 사용하면 더욱 유연한 스타일 설계가 가능합니다.
샘플 코드
1@function theme-color($theme, $type) {
2 @return if(
3 $theme == "dark",
4 if(
5 $type == "background",
6 black,
7 white
8 ),
9 if(
10 $type == "background",
11 white,
12 black
13 )
14 );
15}
16
17body {
18 background-color: theme-color("dark", "background");
19 color: theme-color("dark", "text");
20}- 이 코드는
@function내부에서if()를 사용하여 테마와 색상 타입에 따라 적절한 색을 반환하는 방법을 보여줍니다. 이를 통해 각 테마에 대해 일관되고 재사용 가능한 스타일 설계가 가능합니다.
생성된 CSS
1body {
2 background-color: black;
3 color: white;
4}if()함수를 활용한 헬퍼 함수를 만들어 사용하면 프로젝트 전체의 유지보수성을 향상시킬 수 있습니다.
노트
-
if함수는 동적 값과 함께 사용할 수 없습니다 CSS 자체가 정적 언어이기 때문에if함수는 SASS가 컴파일될 때 값을 결정합니다. 런타임 조건 분기에는 JavaScript를 사용해야 합니다. -
가독성을 우선하세요 중첩된
if함수는 복잡해져 가독성을 해칠 수 있으므로, 필요에 따라 코드를 정리하기 위해 SASS@mixin과@function을 사용할 수 있습니다.
결론
SASS의 if 함수는 조건에 따라 서로 다른 값을 반환하는 강력한 도구입니다. 단순한 조건 처리뿐만 아니라 테마 전환, 동적 스타일 설정 등 다양한 상황에서 유용합니다. 다만 복잡한 조건을 다룰 때는 가독성에 유의하고 @mixin, @function을 활용해 유지보수성을 높이세요.
if 함수를 익히면 보다 효율적이고 유연한 스타일 설계를 구현할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.