CSS를 익히며 SCSS, 그리고 SASS라는 것에 대해 들어봤지만 왜 쓰는지 어떻게 쓰는지 차이는 무엇인지에 대해 정확히 알고 있지 않다가 이번에 정리를 해보려고 한다.
요약
결론은 SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판 ( CSS를 확장하는 스크립팅언어 ) 정도로 생각하면 좋을 것 같다.
- html 코드
<ul class='list'>
<li>1</li>
<li>2</li>
<li>3</li>
</div>이런 코드가 있다고 치자. 이 html코드를 꾸밀 때
SCSS와 SASS, 그리고 CSS의 차이는 아래 상세 내용에서 있지만 간단하게 코드로 차이점을 확인해보면
- CSS 코드
.list {
width: 100px;
float: left;
}
li {
color: red;
background: url("./image.jpg");
}
li:last-child {
margin-right: -10px;
}
- SCSS 코드
.list {
width: 100px;
float: left;
li {
color: red;
background: url("./image.jpg");
&:last-child {
margin-right: -10px;
}
}
}- SASS 코드
.list
width: 100px
float: left
li
color: red
background: url("./image.jpg")
&:last-child
margin-right: -10px
셋 다 같은 것을 적용했지만 약간씩 코드가 다르다. 요정도의 차이가 있는구나 느꼈다.
여기까지 간단한 정의와 차이에 대해 적었다.
나머지 설명과 차이점은 아래에 적도록 하겠다.
설명
1. 왜 쓰냐?
CSS가 복잡한 언어는 아니지만 작업이 크고 고도화 될수록 불편함이 생긴다.
이에 SCSS와 Sass는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
그리고 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.
- 변수의 사용
- 조건문과 반복문
- Import
- Nesting
- Mixin
- Extend/Inheritance
CSS와 비교하여 Sass는 아래와 같은 장점이 있다.
CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.
2. Sass와 SCSS 차이가 뭐냐?
SCSS는 Sassy CSS(멋진 CSS)의 줄임말이고 SASS는 Syntactically Awesome Style Sheets (문법적으로 짱 멋진 스타일시트)의 줄임말이다. 둘 다 멋진 스타일 시트란 말인데 어떤 차이가 있을까?
우선 코드에 대한 대략적인 차이는 위의 코드에서 눈으로 확인 할 수 있다.
문법을 포함한 여러 차이점이 있지만 간단히 요약하자면 SASS보다 SCSS가 뒤에 나왔고 여러가지 문법의 차이가 있지만 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장하고 있다.(공식문법도 SCSS를 기준으로 나와있다고 함) 따라서 SASS는 통상적으로 SCSS라고 부르기도 하는 것 같다.
둘의 차이에 대한 상세한 내용은 다음 링크에서 확인이 가능하다.
https://designmeme.github.io/ko/blog/write-sass-with-scss/
3. 추가
그리고 Sass(SCSS)를 CSS pre-processor(전 처리기)라고도 하는데 이는 Sass자체로 브라우저에 적용하는 것이 아니라 CSS를 확장해서 쉽고 편리하게 쓰기 위해 쓰는 스크립팅 언어이기 때문에
따라서 Sass로 작성한 코드는 컴파일을 해서 일반 CSS의 문법으로 바꾼 뒤 적용한다는 뜻이다.
아래 그림처럼.
대략적인 개념과 차이만 정리해봤다.
적용해보면서 어떤지 느껴봐야겠다.
