CSS는 상대적으로 배우기 쉽고 재미가 있다. 하지만 작업이 많아질수록 불편함이 커지게 된다. HTML마크업이 제대로 되어있지 않다면 더욱 큰 문제가 발생한다.
그래서 우리에게 필요한 것은 SCSS 이다.
CSS Preprocessor 란?
HTML,CSS를 다루다보면 SCSS,Sass,Less 이러한 말을 들어 봤을 것 이다.
위의 친구들은 CSS 전처리기이며, 보통 CSS Preprocessor라고 말한다.
CSS가 동작하기 전에 사용하는 기능이며, 전처리기를 통해 쉽게 입력을 하고 CSS로 변환시키는 것이다! 라고 생각하면 쉽게 이해 할 수 있다.
Sass(SCSS)란 무엇인가?
Sass란 Syntactically Awesome Style Sheets의 약자로, CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다.
Sass와 SCSS의 차이는 어떻게 표기되는지 알아보자!
[Sass 예시]
.example
width: 100px
li
color: blue[SCSS 예시]
.example {
width: 100px;
li {
color: blue;
}
}Sass 와 SCSS의 차이점은 Sass는{}(중괄호)와;(세미콜론)을 사용하지 않지만, SCSS는 CSS와 비슷한 문법으로 {}(중괄호)와;(세미콜론)을 그대로 사용한다. Sass는 유효범위를 '들여쓰기'로 구분하고, SCSS는 {}로 범위를 구분을 한다.
LESS란 무엇인가?(참고)
LESS도 CSS 표현의 일종입니다. 즉, LESS는 CSS에 Script의 능력(변수, 함수, 연산, 중첩, Scope 등)을 덧붙여 확장한 언어입니다.
LESS는 CSS Preprocessor(전처리기)로서 CSS를 변수나 Nested Rules을 이용하여 쉽고 빠르고 체계적으로 프로그래밍 할 수 있게 만든 것을 말합니다.
이때 전처리기(Preprocessor)란 다른 프로그램의 입력으로 사용되는 출력을 생성하기 위해 그 입력 데이터를 처리하는 프로그램을 의미합니다.
CSS Preprocessor에는 LESS, SASS/SCSS 등이 있으며, 그중에 LESS의 문법을 따라 프로그래밍 한 것을 LESS 라고 합니다. LESS는 CSS의 확장버전으로 하위호환성이 뛰어나며, CSS의 기존 문법을 그대로 사용하기 때문에 익히기 쉽다는 장점이 있습니다. 다만, LESS 문법으로 작성된 파일은 less.min.js가 less 파일에 저장되어 있는 것을 웹브라우저가 인식할 수 있는 css로 바꿔줍니다.
LESS는 스크립트 파일 또는 명령어를 사용해 웹브라우저가 인식할 수 있는 CSS로 변환해 주는 작업이 필요합니다. @ 형식으로 변수를 지정할 경우, 단일 값만 저장 처리하며, .형식으로 지정할 경우, 어떤 css도 하나의 형식으로 취급 처리할 수 있습니다.
