프로젝트를 해오면서 scss와 sass를 사용했었는데 정확히 잘 모르고 사용해서 장점을 활용하지 못했던 것 같다.
그래서 이 둘의 차이점은 무엇인지? 장점은 어떤게 있는지 알아보려고 한다.
Sass, SCSS 란?
Sass(Syntactically Awesome Stylesheets)와 SCSS(Sassy CSS)는 모두 CSS 전처리기로서, CSS를 보다 쉽고 유지보수하기 쉽게 작성할 수 있도록 돕는 도구이다.
그렇다면 장점은 무엇일까?
Sass, SCSS의 장점
1. css 호환성
SCSS는 CSS와 유사한 문법을 사용하므로 기존의 CSS 코드를 손쉽게 가져와서 사용할 수 있다. 이는 기존 프로젝트를 SCSS로 전환할 때 부담을 덜어준다!
2. 가독성 및 유지보수성
SCSS는 중괄호({})와 세미콜론(;)을 사용하여 CSS와 비슷한 구문을 가지고 있어 가독성이 좋다.
이로 인해 코드를 이해하고 유지보수하는 데 용이하고 변수, 믹스인, 중첩 등의 기능을 활용하여 코드의 반복을 줄이고 보다 구조화된 코드를 작성할 수 있다.
3. 중첩
SCSS는 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있고 구조화된 코드를 작성할 수 있다. 이를 통해 HTML 구조와 유사한 방식으로 CSS를 작성하여 코드를 더 직관적으로 만들 수 있다.
4. 확장 가능성
SCSS는 기존 CSS 문법을 확장하여 프로그래밍 언어에서 사용하는 조건문, 반복문을 사용한 더 동적인 스타일링을 구현할 수 있다.
그렇다면 이 둘은 같은것일까? 다른것이라면 차이점은 무엇일까?
Sass, SCSS 차이점
차이점을 얘기하기에 앞서 Sass가 먼저 등장하고 SCSS가 나중에 등장하였기 때문에 몇 가지 차이점은 있지만 이 둘은 사실상 같은것이라고 생각하면 이해하기 쉬울 것 같다.
그렇다면 그 차이점은?
1. 확장자
.sass
.scss
너무 당연한 얘긴가..?
2. 문법
Sass
- Sass는 중괄호({})와 세미콜론(;)을 사용하지 않고도 CSS를 작성할 수 있는 문법을 가지고 있다.
들여쓰기를 통해 구조를 만들고, 간결한 문법을 통해 CSS를 생성한다..body font-size: 20px a color: #fff
SCSS
- SCSS는 CSS와 유사한 구문을 가지고 있으며 중괄호({})와 세미콜론(;) 을 사용한다.
이는 기존의 CSS를 더 쉽게 재사용할 수 있게 해준다..body{ font-size: 10px; a{ color: #fff: } }
SCSS는 CSS와 유사한 문법을 사용하여 CSS 전환을 더 쉽게 할 수 있는데 Sass의 기능과 강점을 유지하면서 CSS와의 호환성을 높이기 위해 SCSS가 개발된 것이다. 따라서 현재 대부분의 사용자들이 SCSS를 선호하고 있으며, 일반적으로 더 많이 사용되고 있다.
