css 전처리기, Sass(SCSS)에 대하여
현재 웹 개발트렌드는 컴포넌트 단위로 작성하는 추세로 이어지고 있지만, 먼저 여전히 css를 작성하는 구체적인 방식에 대해서도 알 필요가 있다고 생각이 됩니다.
특히 css를 작성하면서 알아둘 필요가 있는 css 전처리기 를 간단하게 언급해야 할 것 같습니다.
css는 웹 개발 작업이 커지면서 점점 불편함이 생긴다
웹페이지를 만들 때 css 파일에 스타일을 정의합니다. 그런데 웹 페이지가 점점 커지고 복잡해지면 정의하는 스타일도 굉장히 많아지게 되고, 선택자를 불필요하게 과다 사용하게 되는 등 코드가 지저분해질 수 있고, 유지 보수 측면에서 불리한 점이 생길 수 있습니다. 이를 해결하기 위해 등장한 것이 css preprocessor (css 전처리기) 입니다.
css 전처리기
css 전처리기는 태생적으로 기존 css가 가질 수 있는 불리한 점을 해결하기 위해 탄생하였습니다. 대표적인 css 전처리기로는 Sass 가 있습니다. 전처리기들 중 가장 오래된 역사(2006년~)를 가지고 있습니다. 이 외에도 LESS, Stylus 등의 전처리기들도 존재합니다.
Sass 홈페이지 : https://sass-lang.com/
Sass는 이름 자체가 Syntatically Awesome Style Sheets로, 공식 홈페이지에서는 다음과 같이 한 마디로 정의하고 있습니다.
Sass, SCSS?
Sass는 코드를 작성할 때 중괄호({})를 사용하는 대신 파이썬과 같이 들여쓰기로 구문을 감지하며, 세미콜론(;)을 사용하지 않습니다. 이는 css 를 작성하는 것과 다소 차이가 있는 부분입니다. 이후, Sass를 개발하는 사람들은 Sassy Css 를 의미하는 SCSS를 제공하게 됩니다. 즉 css 와 거의 비슷한 문법으로 Sass를 지원하자는 것입니다. SCSS 는 코드 작성 시 css와 동일하게 중괄호나 세미콜론 등을 사용합니다.
이 외에 CSS 전처리기와 Sass에 대한 자세한 설명 및 연산 종류 등은 아래 사이트를 참조하시면 정말 좋을 것 같습니다.
어떤 보일러 플레이트 코드들에서 .scss로 끝나는 파일들을 본 적이 있으실 겁니다. 이렇게 css 파일을 작성하면서 생길 수 있는 여러 단점들을 다양한 연산들이나 기능으로 보완해 주는 것이 css 전처리기의 역할입니다.
- 참고로, Sass, SCSS 등으로 작성된 파일들은 곧바로 웹에 적용될 수는 없습니다. 웹은 기본적으로 css 파일로만 동작하기 때문에 이 파일들은 별도로 컴파일하는 과정을 거친 다음, css 파일로 변환하여 사용하게 됩니다.
현대 웹 프로그래밍의 추세는 컴포넌트화 입니다. 요즘 핫한 React, Vue, Angular 등의 각종 프레임워크들에서는 css 파일과 같이 스타일을 어떻게 정의하고 사용하는지, 무언가 차이점이 있을까요?
다음에는 요즘 대두되고 있는 CSS-in-JS 방식에 대해 포스팅해 보려고 합니다.
결론부터 말하자면, css 파일을 별도로 두어 관리하지 않고 자바스크립트 코드 내에서 모두 해결하는 방식입니다. 위에서 언급했던 것들과는 차이가 있는 것입니다.