SASS의 `!default` 플래그
이 글은 SASS의 !default 플래그를 설명합니다.
우리는 !default 플래그를 자세히 설명하고, 실용적인 예제와 함께 사용하는 방법을 보여드리겠습니다.
YouTube Video
SASS의 !default 플래그
SASS의 !default 플래그는 스타일시트의 모듈화와 재사용성을 높여주는 중요한 도구입니다. 이 플래그를 사용하면 변수에 기본값을 지정할 수 있으면서, 다른 곳에서 정의된 값이 우선 적용되도록 할 수 있습니다. 여기에서는 !default 플래그를 자세히 설명하고 실제 예시로 사용하는 방법을 보여드리겠습니다.
!default 플래그는 변수의 기본값을 지정할 때 사용하는 SASS 전용 기능입니다. 이 플래그를 추가하면 다음과 같은 동작을 하게 됩니다:.
-
기본값 지정하기 변수가 다른 곳에서 정의되지 않은 경우에만 값이 설정됩니다.
-
우선순위 제어 변수가 이미 정의되어 있다면, 기존 값이 덮어써지지 않습니다.
이 기능은 모듈이나 라이브러리를 만들 때 특히 유용합니다. 사용자가 값을 직접 지정할 수도 있지만, 아무 값도 지정하지 않으면 기본값이 사용됩니다.
기본 예시
다음 코드는 !default 플래그의 기본적인 사용 예시입니다.
1// _variables.scss
2$primary-color: blue !default;!default플래그를 사용하여 기본 변수$primary-color를 정의하기.
1// main.scss
2@use 'variables' with (
3 $primary-color: red
4);
5
6body {
7 background-color: variables.$primary-color;
8}@use를 사용해 변수를 가져오고with를 사용해$primary-color를 덮어쓰기.
출력된 CSS
1body {
2 background-color: red;
3}- 이 예제에서는
main.scss에서$primary-color가red로 설정되어 있기 때문에,_variables.scss에 정의된blue는 사용되지 않습니다.
변수가 정의되어 있지 않을 때
main.scss에서 변수가 정의되어 있지 않으면 기본값이 사용됩니다.
1// main.scss
2@use 'variables';
3
4body {
5 background-color: variables.$primary-color;
6}- 변수를 덮어쓰지 않고 가져오기 때문에,
_variables.scss에 정의된$primary-color의 기본값인blue가 적용됩니다.
출력된 CSS
1body {
2 background-color: blue;
3}중첩된 모듈에서의 사용
모듈 내에서 !default를 사용하면 유연한 커스터마이즈가 가능합니다.
1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;!default플래그를 사용하여$primary-color와$button-color를 정의하기.
1// _buttons.scss
2@use 'variables';
3
4.button {
5 color: variables.$button-color;
6}variables모듈을 가져오고$button-color변수를 사용하여.button의 색상을 지정하기.
1// main.scss
2@use 'variables' with (
3 $button-color: orange
4);
5
6@use 'buttons';@use의with옵션으로$button-color를orange로 덮어쓰고,buttons모듈을 사용하기.
출력된 CSS
1.button {
2 color: orange;
3}- 이렇게 하면, 모듈은 기본값을 제공하면서도 사용자의 설정을 존중할 수 있습니다.
주의할 점
!default 플래그를 사용할 때는 다음 사항을 고려해야 합니다:.
-
적절한 기본값 선택 기본값은 일반적인 사용 사례를 충분히 커버할 수 있도록 선택해야 합니다.
-
의도적인 설계 일관된 변수 이름을 사용하고, 다른 모듈과의 충돌을 피해야 합니다.
-
순서 확인
!default플래그가 의도한 대로 동작하려면 변수 덮어쓰기의 순서를 올바르게 관리해야 합니다.
실제 활용 사례
테마 전환
예를 들어 테마를 지원하는 라이브러리를 만들 때, !default를 사용하여 커스터마이즈가 가능한 기본값을 제공할 수 있습니다.
1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6 background-color: $background-color;
7 color: $text-color;
8}- 테마를 위해
!default플래그로$background-color와$text-color를 정의하고, 이를body에 적용하기.
1// main.scss
2@use 'theme' with (
3 $background-color: #f0f0f0
4);@use와with옵션으로$background-color를 덮어써 테마를 커스터마이즈하기.
출력된 CSS
1body {
2 background-color: #f0f0f0;
3 color: black;
4}재사용 가능한 컴포넌트
재사용 가능한 버튼 컴포넌트에서는 기본 스타일을 제공하면서 사용자가 색상을 덮어쓸 수 있도록 할 수 있습니다.
1// _buttons.scss
2$button-bg: #007bff !default;
3$button-color: #ffffff !default;
4
5.button {
6 background-color: $button-bg;
7 color: $button-color;
8 padding: 0.5em 1em;
9 border-radius: 4px;
10}!default로 버튼의 기본 배경색과 텍스트 색을 정의하고 스타일을 적용하기.
1// main.scss
2@use 'buttons' with (
3 $button-bg: #28a745
4);@use와with로$button-bg를 덮어써 버튼 색상을 커스터마이즈하기.
출력된 CSS
1.button {
2 background-color: #28a745;
3 color: #ffffff;
4 padding: 0.5em 1em;
5 border-radius: 4px;
6}!default 플래그 요약
SASS의 !default 플래그는 모듈과 라이브러리를 만들 때 유용한 강력한 도구입니다. 재사용성을 높이면서도 유연한 커스터마이즈를 가능하게 해줍니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.