SCSS

SCSS

CSS는 웹 HTML 문서와 내부 요소들의 style을 지정하기 위해 사용하는 툴입니다. CSS는 사용하기 편하고 직관적이지만, 서비스가 커지게 되면서 많은 단점 또한 생겨나게 되었습니다. 대표적인 단점으로는 선택자(Selectors)의 과잉으로 인한 추적 및 유지보수의 어려움이 있습니다.

 

이를 해결하기 위해 나타난 툴이 CSS 전처리기입니다. CSS의 언어로 웹 문서에 적용되지만, CSS에 다양한 확장 기능을 제공하여 보다 편리한 사용을 가능하게 합니다.

 

주요 기능

공식 문서에 따르면, SCSS는 아래와 같은 특징을 가지고 있습니다.

1. 변수 : 자주 사용되는 CSS 특성을 변수에 저장하여 선택자에 변수로 적용할 수 있습니다.
2. Nesting : 부모 요소에 자식 요소의 스타일을 집어넣어 가독성을 부여할 수 있습니다.
3. 모듈 : 자바스크립트와 같이, 특정 CSS 파일을 다른 CSS파일에서 import하여 사용할 수 있습니다.
4. Extend : @extend 명령어를 사용하여 CSS 특성을 다른 HTML 요소에 손쉽게 적용할 수 있습니다.
5. Operators : 문서 내에서 연산자를 사용하여 연산을 수행할 수 있습니다. 

설치

npm install node-sass --save

npm을 사용하여 설치하면, package.json파일에 버젼이 추가됩니다.