SASS(scss) 문법 #2_ Variables (변수)

Variables (변수)

$를 사용하여 변수를 지정한다. 중복된 단어를 변수로 치환하여 유지보수가 쉬워진다.

 

_variables.scss

// font-family
$font-bk: "NotoBK", san-serif;
$font-b: "NotoB", san-serif;
$font-m: "NotoM", san-serif;
$font-r: "NotoR", san-serif;
$font-dl: "NotoDL", san-serif;
$font-l: "NotoL", san-serif;

// txt-colors
$txt-gray: #747473;
$txt-def: #333;
$txt-disabled: #b8b8b8;
$txt-pink: #f34176;
$txt-red: #ea6575;
$txt-navy: #24364f;
$txt-blue: #2b40ab;
$txt-yw: yellow;

 

_common.scss

- 등록한 변수 사용하기

body {
	font-family: $font-r;
    color: $txt-def;
}