Scss #2. 변수 (Variable)

Scss를 사용하는 가장큰 이유중 2번째가 변수를 사용부분인거같다.

 

사실 css를 쓰다 보면 반복적으로 특정 색깔을 지정하게 되는데 이럴때 유용하게 사용이 가능할거같다.

 

특히 유지보수적인 측면에서 상당히 편해지는 부분이있다. 같은색깔들을 전부찾아 바꿀수 있지만.

 

scss상단에 특정 색상들을 선언해두고 이후 유지보수시에는 변수에서만 변경해주면 되기때문이다.

 

이부분은 색상뿐만 아니라 폰트사이즈, 너비, 높이등에서도 사용가능하다.

 

아래는 scss변수 선언방법이다.

// variable

$white: #fff; // 하얀색
$black: #000; // 검정색
$gray: #ddd; // 회색
$red: red; // 빨간색

아래는 scss변수를 활용한 scss 파일이다.

// scss file

#sample {
    background: $black;
    div {
        color: $red;
        ul {
            font-size: 15px;
            li {
                list-style: none;
                a {
                    text-decoration: none;
                }
            }
        }
    }
}

아래는 위의 scss파일을 컴파일한것이다.

// css file

#sample {
  background: #000;
}

#sample div {
  color: red;
}

#sample div ul {
  font-size: 15px;
}

#sample div ul li {
  list-style: none;
}

#sample div ul li a {
  text-decoration: none;
}