[SCSS] 변수 선언

HTML를 꾸미는 CSS는 사용하기 편리하고 초보자도 배우기 쉽다는 장점이 있지만 코드를 깔끔하게 정리하기 어렵고 코드의 재사용과 유지보수가 힘들다는 단점이 있다.

위 단점을 커버하기 위해 SCSS를 배워보려고 한다.

SASS, SCSS

SASS는 기존 CSS의 단점을 보완하고 효율성을 높이기 위해서 만들어진 문법이다.
SCSS는 SASS에서 조금 더 발전한 문법이라고 보면 된다.

SCSS는 (SASS도 마찬가지) CSS 코드 중첩, 코드 변수화, 속성 재사용 등의 기능이있다.

우선 사용방법은

npm install sass

먼저 설치해준 뒤 사용할 CSS파일 확장자를 SCSS로 바꾼다.

SCSS 변수 사용법

$font-big: 50px;
$font-mid: 40px;
$font-small: 30px;

$font-bold: 900;
$font-thin: 200;

$color-blue: rgb(58, 109, 228);

.test {
  color: $color-blue;
  font-size: $font-big;
  font-weight: 900;
}

h2 {
  color: pink;
  font-weight: $font-bold;
  font-size: $font-mid;
}

보기와 같이 $기호를 앞에 쓰고 변수명을 지정해주면 CSS 속성으로 사용할 수 있다.$정의된 속성은 재사용이 가능하다.

다양한 데이터 타입을 사용할 수 있다.
예시

$color-blue: rgb(58, 109, 228);
$font-big: 50px;
$font-family: "Arial, sans-serif";
$font-family: "Arial, sans-serif";

회고: 사스라는 것을 말로는 많이 들어봤는데 써본 적은 처음이다.
기존에 바닐라 CSS에서는 클래스명을 인라인 클래스네임에다 변수처럼 쓴 적은 있는데
이렇게 변수로 작성하면 더 편리할 것 같다.