CSS? SCSS?
웹 퍼블리싱에 있어서, HTML 다음으로 가장많이 쓰인다고 생각되는게 있다면 CSS가 아닐까 싶다.
왜냐하면 CSS는 HTML과 함께 웹 페이지를 구성하는 가장 중요한것 중에 하나이기 때문이다.
Cascading Style Sheet의 약자로 이름에서 알 수 있듯이 웹 페이지의 스타일시트 즉, 시각적인 표현을 담당하는 스타일시트 언어이다. (프로그래밍 언어는 아니다.)
Cascading(계단식 진행)으로 진행되기에 상위요소의 스타일이 하위요소에 상속되면서 스타일값이 적용되는 구조를 가지고 있다.
css 작성 이미지
위에서부터 부모요소의 스타일값이 잡히고, 하위요소로 내려오면서 부모요소 즉, 상위요소의 스타일값이 하위요소로 상속되면서 계단식으로 스타일값이 적용된다.
CSS를 사용하다보면 부모요소부터 자식요소로 점점 내려갈때마다 클래스명을 점점 늘려가면서 작성하게 되는데 하위요소로 내려갈때마다 늘어지는 클래스명이 부담될때가 있다. 그런 부담을 덜어줄수있는게 SCSS라는 CSS와는 결이 같으면서도 약간 다른 스타일시트 언어다.
SCSS or SASS
SCSS 또는 SASS라고 불리는데
SASS는 Syntactically Awesome Style Sheets (문법적으로 굉장한 스타일 시트)
SCSS는 Sassy CSS (개쩌는 스타일 시트)
의 각각 줄임말로 둘 다 별의미는 없고 멋진CSS다라고 생각하면 된다.
둘 다 문법만 약간 다르고 동작은 똑같고, SCSS가 더 많이 쓰인다.
그러면 CSS의 부담감을 어떻게 덜어주는지 SCSS와 CSS를 비교해보자면,
왼쪽이 SCSS이고, 오른쪽이 CSS인데 SCSS는 CSS과 다르게 여러요소들을 부모, 자식요소의 관계에 맞게 들여쓰는 방법인데 이를 중첩(Nesting)한다고 한다.
SCSS의 좋은 점 3가지
- 중첩(Nesting)을 함으로써 CSS보다 좀 더 간결하게 스타일코드 작성이 가능하다.
- 들여쓰기 때문에 부모, 자식요소간에 계층 구조를 파악하기 수월하다.
- vscode에서 HTML처럼 긴 코드들을 접고 펴고가 가능해서 CSS에서의 스크롤압박이 상대적으로 덜하다.
