SASS 변수
이 글은 SASS 변수에 대해 설명합니다.
SASS 변수에 대해 자세히 설명하고, 실제 사용 방법을 단계별로 배웁니다.
YouTube Video
SASS 변수
SASS는 CSS를 보다 유연하고 효율적으로 작성할 수 있게 해주는 CSS 확장 언어입니다. 여러 기능 중에서, 변수는 스타일의 일관성을 유지하면서도 변경을 쉽게 해주는 강력한 도구입니다.
SASS 변수란 무엇인가요?
SASS 변수는 CSS에서 자주 사용하는 색상, 글꼴 크기, 간격 등의 값을 한 곳에서 관리할 수 있도록 저장하는 방법을 제공합니다.
변수를 사용하면 스타일을 쉽게 변경할 수 있고 코드 가독성도 향상됩니다.
변수를 작성하는 방법
변수는 다음과 같이 작성할 수 있습니다.
1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;- 변수 이름 앞에
$기호를 붙여야 합니다. variable-name은 변수의 이름입니다. 명확하고 설명적인 이름을 사용하는 것이 좋습니다.value는 변수에 할당된 값입니다.
변수의 기본 사용법
아래는 SASS 변수의 기본 예시입니다.
1// Variable definition
2$primary-color: #3498db;
3$secondary-color: #2ecc71;
4$base-font-size: 16px;
5
6// Variable usage
7body {
8 font-size: $base-font-size;
9 color: $primary-color;
10 background-color: $secondary-color;
11}$primary-color와 같은 변수를 한 번 정의하면 여러 번 재사용할 수 있습니다.- 값을 변경할 때 변수 정의만 수정하면 되므로 유지보수성이 향상됩니다.
생성된 CSS 출력
1body {
2 font-size: 16px;
3 color: #3498db;
4 background-color: #2ecc71;
5}중첩 구조에서 변수 사용하기
SASS의 중첩과 변수를 함께 사용하면 코드를 정리하기 쉽고 관리가 편리해집니다.
1@use "sass:color";
2
3// Variable definition
4$button-bg: #e74c3c;
5$button-color: #fff;
6$button-padding: 10px 20px;
7
8.button {
9 background-color: $button-bg;
10 color: $button-color;
11 padding: $button-padding;
12
13 &:hover {
14 background-color: color.adjust($button-bg, $lightness: -10%);
15 }
16}- 중첩된 선택자 안에서도 변수를 사용할 수 있습니다.
- 변수를 조합하면
color.adjust함수를 사용하여 색상을 10% 더 어둡게 만드는 것과 같이 유연한 스타일링을 할 수 있습니다.
생성된 CSS 출력
1.button {
2 background-color: #e74c3c;
3 color: #fff;
4 padding: 10px 20px;
5}
6
7.button:hover {
8 background-color: #c0392b;
9}기본값이 있는 변수
SASS에서는 변수에 기본값을 설정할 수 있습니다. 기본값을 설정하면 기존 변수를 덮어쓰지 않고 사용할 수 있습니다.
1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8 font-size: $font-size;
9}!default를 붙이면 해당 변수가 이미 정의되어 있을 경우 덮어쓰지 않습니다.- 이 기능은 팀 개발이나 프로젝트 전체 설정에 유용합니다.
생성된 CSS 출력
1p {
2 font-size: 16px;
3}변수의 범위
SASS 변수는 범위를 가지며, 정의된 위치에 따라 사용할 수 있는 범위가 달라집니다. 범위를 이해하면 변수의 의도치 않은 덮어쓰기를 방지할 수 있습니다.
- 전역 범위
1$global-color: #ff6347;
2
3.header {
4 color: $global-color;
5}- 전역 범위의 변수는 파일 전체에서 사용할 수 있습니다.
- 지역 범위
1.card {
2 $card-bg: #f0f0f0;
3 background-color: $card-bg;
4}
5
6.button {
7 // Error: $card-bg cannot be used
8 background-color: $card-bg;
9}- 지역 범위의 변수는 특정 중첩이나 파일 내에서만 사용할 수 있습니다.
계산에서 변수 사용하기
SASS 변수는 계산에도 사용할 수 있습니다. 단위가 있는 값이나 색상에도 계산을 적용할 수 있습니다.
1@use "sass:color";
2
3$base-padding: 10px;
4$double-padding: $base-padding * 2;
5
6.container {
7 padding: $double-padding;
8}
9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14 color: $lighter-color;
15}생성된 CSS 출력
1.container {
2 padding: 20px;
3}
4
5h1 {
6 color: #5dade2;
7}- 색상 조정이나 간격 계산에 변수를 사용하면 유지 관리가 쉬워집니다.
요약
SASS 변수는 효율적인 CSS 관리와 유지보수를 위한 필수 기능입니다.
SASS 변수를 사용하면 프로젝트 전체의 스타일을 일관성 있게 유지할 수 있고, 변경도 쉬워집니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.