Sass(SCSS)문법은 무엇이고 왜 등장하였을까
먼저, CSS의 단점에 대해 나열해보면
- 선택자를 만들 때 매번 불필요한 부모요소 선택자를 작성해야함
- 동적으로 변경할 때 일일이 수동으로 변경해야한다.
- 중복되는 코드가 많아져 유지보수에 좋지 않다.
즉, 쉽게 잘하면 선택자 과용, 코드 중복이 많아져서 유지보수가 어려워진다는 단점이 있다.
위와 같은 CSS의 단점으로 인해 Sass(SCSS)가 등장하였다.
Sass(SCSS)문법은 코드의 재활용성을 높이고, 가독성을 올림으로서 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어이다.
하지만 여기서 헷갈리면 안되는 것이 전처리기 언어의 동작 방식이다. 전처리기 언어로 작성을 한다고 전처리기 언어로 직접 동작시키는게 아니다. 웹은 CSS만 인식하기 때문에 문법만 Sass(SCSS)로 작성하고, CSS로 컴파일되어 웹에서 동작되는 것이다.
타입스크립트로 작성되고 자바스크립트로 컴파일되는 구조와 일치한다.
그럼 Sass는 뭐고 SCSS는 뭘까
나도 처음 Sass의 존재를 처음 알았을 때는 Sass도 있고 SCSS도 있고 아예 다른 종류인줄 알고 SCSS만 사용했다.
하지만 더 공부해보고 찾아본 후 두 문법의 관계를 다시 알게되었다.
Sass는 CSS 전처리기 언어임과 동시에 하나의 문법으로써의 의미도 있다.
SCSS는 Sass의 3버전에서 등장한 언어이다. 즉, 문법의 생김새는 다르지만 같은 파생 언어인 것이다.
기존 Sass에서 좀더 css와 비슷한 구문을 가지고 있고, css와 완전 호환되도록 새로 도입한 스타일시트이다.
따라서, SCSS문법으로 코드를 작성하면 Sass 전처리기의 도움을 받아 컴파일러가 CSS로 빌드할 수 있는 것이다.
Sass와 SCSS의 문법적으로의 차이는 {}(중괄호), ;(세미콜론)와 Mixin에서 차이가 있다.
- SCSS에서는 중괄호와 세미콜론을 사용하지만,
Sass는 중괄호와 세미콜론을 사용하지 않는다. - SCSS는 @mixin과 @include를 사용하지만,
Sass는 =와 +기호를 사용한다.
그래서 Sass랑 SCSS 중에 뭘 쓰라는걸까
둘 다 동일한 기능을 갖고 있기 때문에 뭘 사용해라! 이건 없지만,
자바스크립트 구문 스타일에 익숙하다면 사용자가 압도적으로 많고, CSS와 더 비슷하고 호환이 좋은 SCSS를 사용하면 된다.
// SCSS 문법
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}// SASS 문법
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
SCSS의 기능과 장점
이 포스팅에서는 기능과 장점을 나열만 할 것이다.
기능들에 대한 자세한 코드예시와 딥한 내용은 각각 포스팅을 할 것이다.
- CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
- CSS의 태생적 한계를 보완하기 위한 기능들이 있다.
- 변수의 사용
- 조건문과 반복문
- 모듈
- Nesting (선택자 중첩기능)
- Mixin
- Extend - 위와 같은 기능들 덕분에 불필요한 반복적 사용을 줄일 수 있다.
