[SASS/SCSS] 변수, 산술 연산, import(가져오기)

변수는 프로그래밍언어를 한번이라도 공부했다면 어떤것인지 아실겁니다. 간단하게 설명하자면 데이터를 저장해두는 메모리공간을 의미합니다. CSS에서 변수를 전역에서 사용하기 위해서는 :root라는 가상클래스안에서 --를 붙인 변수를 만들어 사용합니다.

[예시]

/* CSS */
:root {
  --fontColor: red;
}

p {
  color: var(--fontColor);
}

SCSS에서는 더욱 간단하게 사용할 수 있습니다. 변수명 앞에 $를 붙이고 데이터를 넣어주면 끝입니다.

SCSS는 코드블럭이 적용되지 않으므로 사진으로 대체

/* CSS */
p {
  color: red;
}

SCSS로 작성하고 컴파일하면 변수는 사라지고 color 속성에 변수에 저장한 데이터가 들어가게됩니다.

산술연산

CSS에서도 값을 계산해서 사이즈를 지정할 수 있습니다. calc를 이용하는 방법입니다. 보통 필자는 height를 헤더값을 뺸 100vh를 사용할 떄 자주 사용합니다.

/* CSS */
.container {
  width: 100%;
  height: calc(100vh - 150px);
}

만약 이런 경우가 여러번이라면 150px를 모든곳을 찾아서 직접 바꿔야하는 불편함이 있습니다. 하지만 SCSS의 변수를 이용한다면 변수의 값만 바꿔줌으로써 값이 바뀌게 됩니다.

SCSS는 코드블럭이 적용되지 않으므로 사진으로 대체

컴파일하면 위에 CSS코드랑 똑같이 나옵니다.

import(가져오기)

import는 다양한 프로그래밍에서 사용됩니다. 만일 공통적으로 사용하는 변수가 많다면 이 가져오기를 통해서 한 파일에 변수를 몰아넣어서 작성하는 방법도 생기게됩니다.

main.scss

container.scss

이처럼 공통적으로 자주 사용하는 변수를 한 파일에 넣어서 작성해서 저장한다음 import로 파일을 불러오면 미리 저장한 변수만 사용할 수 있습니다.