SASS / 변수 선언하고 사용하기
CSS는 변수를 사용할 수 없습니다. 반복적으로 사용되는 코드라도 계속 입력을 해야 합니다. 그 코드가 바뀌면 모든 코드를 수정해야 합니다. 하지만, SASS는 변수를 사용할 수 있습니다. 반복적으로 사용되는 코드를 변수에 저장하고 꺼내 쓸 수 있습니다. 수정할 때는 변수의 값만 변경하면 되므로 작업이 간단해집니다.
변수 선언하기
$variable-name: variable-value;
예를 들어
$jb-color: red;
와 같이 하면 jb-color라는 변수에 red라는 값을 저장합니다.
변수 사용하기
사용하고자 하는 곳에
$variable-name
를 넣으면 됩니다.
예제
SCSS
$jb-font: "Times New Roman"; $jb-size: 20px; $jb-color: #444444; h1 { font-family: $jb-font; font-size: $jb-size; color: $jb-color; }
CSS
h1 { font-family: "Times New Roman"; font-size: 20px; color: #444444; }