sass 변수 사용

CSS를 편리하게 다룰 수 있게 해주는 Sass.

쌩 CSS를 작성하고 관리하는 것보다 어떤 점이 편리해지는지 예시를 기록한다.

 

변수를 사용할 수 있다.

개발 시 사용할 각종 자원들―색상 hex code 등, 폰트 size, line height, letter spacing 등―을 변수로 지정하여 중복되는 입력, CSS 코드 유지보수를 편리하게 해준다.

---

sass에서 변수를 선언하여 사용할 수 있다.

$변수명: 값;

값에는 CSS value에 해당하는 것들을 넣을 수 있다.

// CSS

p {
	transition: color 200ms ease-in;
	color: #000;
}

//SCSS

$transition-1: color 200ms ease-in;
$black: #000;

p {
	transition: $transition-1;
	color: $black;
}