[SCSS] 주석, 변수, 보간법

국비 교육을 들으며 Saas를 처음 배워보았다. 처음 SCSS를 사용해보고 나서 든 생각은 정말 프로그래밍 언어와 다를게 없다고 생각했다. 파일 관리를 모듈 단위로 한다는 점에서 리액트와 뷰랑 사용법이 유사하다고 생각이 드는데 이렇게 코드를 작성하면 바닐라 JS에서도 라이브러리를 쓰듯 코드를 작성하는게 가능할 것 같다는 생각이 들었다. 

 

다음으로는 코드의 가독성이 너무 좋다. 또 if 의 사용으로 인해 정말 프로그래밍 언어처럼 코드를 작성할 수도 있다. CSS에서 해당 기능을 사용할 수 있다는게 신기했다. 

 

그런데 해외 코드를 읽으며 SCSS는 정말 많이 봤지만 국내에서는 인지도가 조금 떨어지는 것 같기도 하다. 리액트나 뷰는 JS 를 쓰는 거의 모든 기업들이 사용을 하고 있지만, SCSS는 지원 자격에서 필수가 아니라던지 인터넷에 떠도는 코드의 양이 많지는 않은 것 같은 느낌이 든다. 

 

+ 코드 블록중에 SCSS 블록이 없어서 CSS로 작성했더니 코드 컬러링이 조금 이상하게 보입니다 ㅜ 코드는 맞으니 복사하셔서 사용 가능합니다. 

---

SCSS 주석 사용법

CSS에서는 // 주석을 지원하지 않는다. 하지만 SCSS에서는 한 줄 주석을 지원한다. 해당 주석은 CSS로 변환했을 때 사라진다. 

// 주석입니다

 

한 줄 주석은 괄호 내에서도 사용이 가능하다.

.sans {
  font: SpoqaHanSans, // 한 줄 주석을 이렇게 사용 가능합니다.
				Helvetica, Verdana, sans-serif;

SCSS 변수 사용법

변수 선언은 $로 선언하고 변수 이름에는 -과 _를 사용할 수 있다. -사용한 변수와 _을 사용한 변수는 같은 변수이다.

$base-color: #bf2243;
$border-color: rgba($base-color, 0.7);

.alert {
  border: 1px solid $border_color; 
}
// border_color와 border-color는 같은 변수 입니다.

 

변수 보간법

변수를 만들면 가장 많이 사용하게 되는 보간법이다. #{ 변수 } 형태로 사용 가능하다. 출력문인 @debug와 함께 사용하면 아래와 같은 결과가 나온다. 

$size: 10px;
@debug "size: " + $size;

// 출력 : Debug: size: 10px

 

CSS변수와 SCSS 변수의 차이점

CSS변수는 "변수" 그 자체로 인식을 하지만 SCSS는 컴파일 과정에서 변수가 아닌 "값" 으로 변환한다. 따라서 우리는 변수처럼 사용하지만 실제 변환된 CSS를 보면 값이 할당 된 것을 볼 수 있다. 

//SCSS 

$size: 10px;

.box {
  width: $size;
  height: $size;
}

// CSS 변환 후

.box {
  width: 10px;
  height: 10px;
}

 

또한 명령형인 Sass 변수는 변수를 사용한 후 그 값을 변경해도 이전에 사용된 값은 그 값을 유지한다. 

// SCSS

$color: #bf2243; //전역 변수 선언
.rule-1 {
  color: $color;
}

$color: #0e0948;  //이름이 같은 전역변수 선언
.rule-2 {
  color: $color;
}


//CSS 변환 후

/* 
rule-1은 이전에 정의된 변수의 색상을 사용하고, rule-2는 이후에 정의된 색상을 사용합니다. 
*/

.rule-1 {
  color: #bf2243;
}

.rule-2 {
  color: #0e0948;
}