어느 기업의 공고에서 JD에
SCSS, SASS를 사용해 본 경험이 있는 분
이라고 작성되어 있길래 차이점에 대해 궁금해서 정리해보았다.
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세가지 다 큰 틀은 비슷하지만 약간씩 차이점이 있다.
CSS, SCSS, SASS를 사용하는 이유
CSS가 복잡하진 않지만, 프로젝트의 규모가 크고 고도화 될 수록 불편함이 생길 수 밖에 없다.
SCSS와 SASS는 선택자(Selector)의 과한 사용과 연산 기능의 한계, 구문의 부재 등 프로젝트 규모가 커질 수록 복잡해지는 CSS의 작업을 쉽게 해주고, 가독성과 재사용성을 높여주어 유지보수를 용이하게 도와준다.
또한, CSS의 태생적 한계를 보완하기 위해 SASS는 다음과 같은 기능과 도구를 제공한다.
- 변수 사용
- 조건문과 반복문
- Import
- Nesting
- Mixin
- Extend/Inheritance
CSS와 비교하여 SASS는 다음과 같은 장점이 있다.
CSS보다 단순한 표기법으로 CSS를 구조화하여 표현할 수 있다.
팀원들의 스킬 레벨이 각각 다를 수 밖에 없는데, 이런 경우 구문의 표준화를 시킬 수 있다.
CSS에는 존재하지 않는 Mixin등의 기능을 사용하여 유지보수의 편의성을 대폭 향상시킬 수 있다.
SASS와 SCSS의 차이점
SCSS는 Sassy CSS(멋진 CSS)의 줄임말이고, SASS는 Syntactically Awesome Style Sheets(문법적으로 놀라운 스타일 시트)라는 말의 줄임말이다.
코드에 대한 차이점으로는 위의 예시에서 확인 할 수 있다.
SCSS가 SASS보다 나중에 생겨났고, 여러 문법의 차이가 있겠지만
SCSS가 더 넓은 범용성을 가지고 있고, CSS와의 호환성등의 장점으로 인해 SCSS의 사용을 권장하고 있다.
자세한 내용은 링크에서 확인해보면 좋을 것 같다.
https://designmeme.github.io/ko/blog/write-sass-with-scss/
또한, SCSS를 CSS pre-processor(전 처리기)라고 부르기도 하는데,
SCSS 자체를 브라우저에 적용하는 것이 아닌, CSS를 확장해서 사용하는 스크립팅 언어이기 때문에 SCSS, SASS로 작성한 코드는 컴파일을 통해 CSS 문법으로 바꾼 뒤 적용하기 때문이다.
참고
참조 : https://velog.io/@jch9537/CSS-SCSS-SASS
SASS 공식 문서 : https://sass-lang.com/
