결론부터
SASS 와 SCSS 라는 것을 사용하는 이유는?
→ CSS를 편리하게 이용하기 위해서 SASS & SCSS 를 사용한다
CSS 의 문제점
CSS는 그 자체로도 충분히 훌륭한 형식 언어이다.
그러나 CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해진다.
(간단한 웹 사이트도 CSS 코드는 몇천 줄을 쉽게 넘긴다...)
CSS 내 반복되는 내용은 줄이고 보다 효율적으로 스타일시트를 관리할 수는 없을까요??
→ SASS & SCSS 를 사용하기
근데 SASS 와 SCSS의 차이점은 ?
→ 그냥 같은거라고 생각하면 마음이 편하다
💡 참고) SASS가 먼저 생기고 그 다음에 SCSS가 생겼다! 그래서 난 그냥 SCSS를 사용하자 (최신게 좋자나)
굳이 차이점을 따지자면?
- 확장자
- 문법
두가지가 존재한다. 확장자는 뭐 *.scss, *.sass 라는건 너무 당연하다.
문법차이는 { } ; 의 유무가 있다! 여기까지만 알자! 그 외에도 차이가 있겠지만 ...패스 (mixin 문법 등등)
SCSS
.text{
font-size: 10px;
a{
color: #fff:
}
}
SASS
.text
font-size: 20px
a
color: #fff
Sass(SCSS) 는 전처리기 (Preprocessor)
Sass는 CSS 전처리기(Preprocessor) 라고도 한다.
그 이유는 결국 Sass는 CSS 코드를 생산해내기 위해 사용하는 일종의 도구이기 때문이다.
Sass가 CSS를 대체해서 웹 디자인에 적용하는 것이 아니다.
기존과 동일하게 CSS가 디자인을 꾸미는데, Sass를 통해서 CSS를 더욱 쉽고 편리하게 쓸 수 있다
그래서 Sass는 CSS의 확장 언어이고 스크립팅 언어이다.
Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차이다.
Sass(SCSS) 의 장점
- CSS보다 심플한 표기법이다
- 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
- 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
- CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.
- 변수의 사용
- 조건문과 반복문
- Import (모듈화)
- Nesting (선택자 반복 작성 줄여주는 기능)
- Mixin (함수 개념)
- Extend/Inheritance (확장/상속)
- 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.
- 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
- 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
- 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.
