varaible

변수

$ 키를 이용하여 원하는 영문 / 영문 + 숫자 / 영문 + 특수문자 + 숫자 / 대소문자 등으로 사용할 수 있습니다.
동일한 컴포넌트 ui 에 동일한 스타일을 유지할 수 있고 전역, 지역 변수로도 사용할 수 있습니다.

scss

$white: #fff;
$gray: #c9c9c9;
$blue: blue;
$red: red;
$fs30: 30px;
$s50: 50px;

.btn1 { 
  $hoverColor: #555; 
  width: 200px; 
  height: $s50; 
  line-height: $s50; 
  font-size: $fs30; 
  color: $white; 
  background-color: $gray; 
  border: 1px solid $white; 
  &:hover { background: $hoverColor; color: $gray; }
}

.btn2 { 
  font-size: $fs30; 
  border: 1px solid $red; 
  background-color: $blue; 
  color: $gray; 
  padding: 10px;
}

css

.btn1 { width: 200px; height: 50px; line-height: 50px; font-size: 30px; color: #fff; background-color: #c9c9c9; border: 1px solid #fff; }

.btn1:hover { background: #555; color: #c9c9c9; }

.btn2 { font-size: 30px; border: 1px solid red; background-color: blue; color: #c9c9c9; padding: 10px; }