[SCSS] SCSS 변수와 데이터 유형

SCSS는 CSS를 확장한 언어로서, 변수를 사용하여 스타일 속성의 값을 저장하고 재사용할 수 있습니다. 이 글에서는 SCSS에서 변수의 사용법과 데이터 유형에 대해 알아보겠습니다.

---

변수 선언과 사용

변수는 $ 기호를 사용하여 선언하고, 값을 할당하여 사용합니다.

$primary-color: #007bff;
$font-size: 16px;

 

위의 예제에서 $primary-color 변수는 파란색(#007bff) 값을, $font-size 변수는 16px 값을 가지고 있습니다. 변수를 사용하여 스타일 속성 값을 설정할 수 있습니다.

.header {
  background-color: $primary-color;
  font-size: $font-size;
}

---

데이터 유형

SCSS 변수는 데이터 유형에 따라 여러 가지 값들을 저장할 수 있습니다.

숫자(Number)

숫자는 단위와 함께 사용될 수 있습니다.

$font-size: 16px;
$line-height: 1.5;

 

문자열(String)

문자열은 따옴표(' 또는 "로 감싸진 값)를 사용하여 선언할 수 있습니다.

$font-family: 'Arial, sans-serif';

불리언(Boolean)

불리언은 true 또는 false 값을 가집니다.

$enabled: true;
$highlighted: false;

리스트(List)

리스트는 여러 값들의 집합으로, 공백이나 콤마로 구분합니다.

$colors: #007bff #ff0000 #00ff00;
$grid-columns: 1fr 2fr 1fr;

맵(Map)

맵은 키-값 쌍으로 이루어진 데이터 구조를 나타냅니다.

$theme-colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745,
);

기타 데이터 유형

SCSS는 또한 null, 함수, 색상(Color), 숫자 연산 등 다양한 데이터 유형을 지원합니다.

$null-value: null;
$function-value: rgba(0, 0, 0, 0.5);
$color-value: #ff0000;

위의 예제들에서 보여주는 것처럼 SCSS 변수는 다양한 데이터 유형을 저장하고 사용할 수 있습니다. 이를 통해 스타일 속성들을 더욱 동적으로 제어하고 모듈화된 스타일 코드를 작성할 수 있습니다. 다음 글에서는 SCSS의 다른 기능들에 대해 더 자세히 알아보겠습니다.