SASS의 조건문
이 문서는 SASS의 조건문을 설명합니다.
실용적인 예제와 함께 @if, @else if, @else 지시어를 사용한 조건문의 기초부터 활용까지 명확하게 설명합니다.
YouTube Video
SASS의 조건문
SASS는 CSS를 확장한 스타일시트 언어로, 조건문을 사용해 스타일을 유연하게 제어할 수 있습니다. SASS에서는 @if, @else if, @else를 사용해 컴파일 시점에 스타일 출력 여부를 분기할 수 있습니다.
기본 조건문 구문
SASS의 기본 조건문은 다음과 같은 구문으로 작성합니다.
1@if condition {
2 // Code executed when the condition is true
3} @else if condition {
4 // Code executed when another condition is true
5} @else {
6 // Code executed when all conditions are false
7}@if는 첫 번째 조건을 평가하고, 거짓이면@else if또는@else블록을 순서대로 평가합니다.
간단한 조건문 예시
다음 예시에서는 $theme 변수에 따라 배경색이 전환됩니다.
1$theme: "dark";
2
3body {
4 @if $theme == "dark" {
5 background-color: #333;
6 color: #fff;
7 } @else if $theme == "light" {
8 background-color: #fff;
9 color: #000;
10 } @else {
11 background-color: #f0f0f0;
12 color: #333;
13 }
14}컴파일된 CSS
1body {
2 background-color: #333;
3 color: #fff;
4}$theme이(가)"dark"일 때, 어두운 배경과 흰 텍스트 색이 적용됩니다.
조건문을 계산과 결합하기
조건문은 문자열 및 색상 비교뿐 아니라 숫자 계산도 처리합니다.
1$width: 1200px;
2
3.container {
4 @if $width > 1000px {
5 max-width: 1200px;
6 } @else {
7 max-width: 800px;
8 }
9}컴파일된 CSS
1.container {
2 max-width: 1200px;
3}- 숫자 비교도 가능하며,
$width가 1000px을 초과하면max-width: 1200px이 출력됩니다.
중첩 조건문
조건문을 중첩하면 복잡한 조건을 표현할 수 있습니다.
1$theme: "dark";
2$size: "large";
3
4button {
5 @if $theme == "dark" {
6 background-color: #000;
7 color: #fff;
8
9 @if $size == "large" {
10 padding: 20px;
11 } @else {
12 padding: 10px;
13 }
14 } @else {
15 background-color: #fff;
16 color: #000;
17
18 @if $size == "large" {
19 padding: 15px;
20 } @else {
21 padding: 8px;
22 }
23 }
24}컴파일된 CSS
1button {
2 background-color: #000;
3 color: #fff;
4 padding: 20px;
5}- 조건문을 중첩하면 테마와 크기 모두에 따른 스타일링이 가능합니다.
커스텀 함수에서 조건문 사용하기
커스텀 함수 내부에서 조건문을 사용하면 재사용성이 향상됩니다.
1@function adjust-color($theme) {
2 @if $theme == "dark" {
3 @return #333;
4 } @else if $theme == "light" {
5 @return #fff;
6 } @else {
7 @return #ccc;
8 }
9}
10
11.card {
12 background-color: adjust-color("dark");
13}컴파일된 CSS
1.card {
2 background-color: #333;
3}- 조건문을 함수로 캡슐화하면 재사용성과 유지보수성을 높일 수 있습니다.
실전 예시 - 디자인 전환
특정 조건에 따라 전체 디자인을 전환하는 예를 살펴보겠습니다.
1$theme: "light";
2
3body {
4 font-family: Arial, sans-serif;
5
6 @if $theme == "dark" {
7 background-color: #121212;
8 color: #e0e0e0;
9 } @else if $theme == "light" {
10 background-color: #f9f9f9;
11 color: #333;
12 } @else {
13 background-color: #fff;
14 color: #000;
15 }
16}
17
18header {
19 @if $theme == "dark" {
20 border-bottom: 1px solid #333;
21 } @else {
22 border-bottom: 1px solid #ccc;
23 }
24}컴파일된 CSS
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f9f9f9;
4 color: #333;
5}
6
7header {
8 border-bottom: 1px solid #ccc;
9}- 테마 변수에 따라 페이지 전체의 색 구성표를 동적으로 전환할 수 있습니다.
주의사항 및 모범 사례
SASS 조건문을 사용할 때 다음 사항을 고려할 수 있습니다.
-
조건문을 단순하게 유지하기
복잡한 중첩은 가독성을 떨어뜨리므로, 함수와 믹스인을 활용해 단순함을 유지하세요.
-
변수와 함수로 추상화하기
여러 곳에서 유사한 조건을 사용한다면, 이를 변수나 함수로 모아두면 유지보수성이 향상됩니다.
-
로직 비대화 방지
가능한 한 디자인 규칙을 통일하고 조건문의 과도한 사용을 피하세요.
결론
SASS의 조건문은 유연하고 동적인 스타일을 만들기 위한 매우 효과적인 도구입니다. 여기에서는 기초부터 실전 예시까지 단계별로 설명했습니다. 실제 프로젝트에서 조건문을 사용할 때는 지나치게 복잡해지지 않도록 주의하면서 재사용 가능한 코드를 염두에 두고 설계하세요.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.