SCSS란?
SCSS란 Sass를 적용한 CSS를 일컫는 말이다.
그렇기에, SCSS를 이해하기 위해서는 우선 SASS에 대해 알아야 한다.
SASS는 무엇인가?
Sass(Syntactically Awesome StyleSheets)라는 것은 간단하게 이야기하면 CSS의 확장판과 같은 개념이다.
Sass가 나오게 된 이유는 무엇일까?
그것은 CSS가 가지는 단점 중에 하나인 단순 반복작업에 있다.
CSS를 사용하다보면, HTML요소에 속성을 부여하기 위하여 반복해서 작성 해야 하는 불편한 부분이 생기기 마련인데,
Sass는 그부분을 거의 완전히 해소한다.
Sass파일의 재미있는점은, sass를 사용한 파일을 css로 확장자만 바꾸었을때도 정상 작동한다는것이다.
물론 가능하다의 범주이고, sass문법 모두가 css에서도 정상작동 한다면 sass는 필요 없었을것이다.
기본적으로 sass가 적용 된 파일은 일반적으론 브라우저가 인식 할 수 없기때문에, 외부 플러그인등을 사용해서 css로 컴파일 한 다음 사용하게 된다.
그래서 SCSS가 무엇인가?
SCSS는 sass를 적용한 css란 의미이다.
SCSS는 sass가 적용 되어 있지만, 문법 자체는 css와 크게 다르지 않다.
css에 확장되어 기능이 추가 된것 외에는 css와 같은것이다.
때문에 사용하는데에 아무래도 더 익숙함을 느끼기에, sass의 공식 문법으로 사용 되고 있다.
SCSS를 컴파일 하려면?
실제로 SCSS를 사용 하려면 컴파일을 하는 작업이 필요한데, 이때 npm에서 제공하는 node-sass를 사용하게 된다.
node-sass를 사용하면 scss파일에서 css로 직접 불러 올 수 있게 된다.
SCSS의 가장 큰 장점은 무엇인가?
직접 사용 했을때, SCSS의 장점은 무엇보다 nesting이었다.
기존 CSS만 사용했을때
.container {
color: black;
}
.container > main {
color: white;
}로 작성 할때,
SCSS를 사용하게 되면
.container {
color: black;
.main {
color: white;
}
}와 같이 나타낼 수 있다.
즉 해당 컨텐츠가 어느 컨텐츠 안에 들어 있는지 알 수 있다는것이다.
개인적으로 이부분이 가장 체감이 크게 되었다.
다음으로는 변수의 선언방법이다.
SCSS는 변수의 선언을 별도의 페이지에 만들고, $마크를 사용해서 변수를 만들게 된다.
이부분도 변수를 한꺼번에 관리하는데 유리한 점 중 하나이다.
그렇다면 SCSS의 단점은 뭘까?
배운지 얼마 안되었기때문도 있겠지만, 가장 큰 단점은 사전 준비가 여럿 필요하다는것이다.
npm을 사용해서 여러 패키지를 설치해야 하고, 아무래도 이부분부터는 기존의 HTML CSS 보다는 심화과정에 해당되다보니,
터미널을 이용한 패키지의 설치, package.json의 조작등 배워야 할것이 많다.
만약 gulp나 react를 사용 할 경우엔 크게 단점으로 작용하지 않는것도 사실이다.
직접 사용 하고 나서 느낀점도 초반에 이것저것 세팅을 해두면 작업 할때 편하게 느껴졌기 때문이다.
