[CSS] css, sass, scss

sass는 가독성을 높이고, 코드 재사용성이 있도록 만든 css의 확장이라고 볼 수 있다.

sass, scss는 컴파일을 통해 css로 변환된다.

	CSS	Sass	SCSS
중괄호 {}	필요	불필요 (공백 2칸 들여쓰기가 코드 블록을 의미함)	필요
세미콜론 ;	필요	불필요	필요
; 뒤의 공백	불필요	필요	불필요
mixin	없음	-	@mixin
include	없음	+	@include
확장자	.css	.sass	.scss

sass 7-1 : css를 관리하는 방식 중 하나 

1. abstracts 

실제 스타일은 없는 추상적인 것들. 

변수, 함수, mixin 등

2. base

가장 기본적인 것들

타이포 규칙 등

3. components

재사용 가능한 작은 부분들

button, input, dropdown 등

4. layout

component보다는 큰 부분들

nav bars, footers 등

5. pages

component와 layout이 조합된 하나의 페이지

주문 페이지, 메인 페이지 등

6. themes

라이트/다크 모드 등

7. vendors

외부 리소스

jquery, bootstrap

 

이렇게 7가지가 모여 메인 sass 파일을 만든다.

 

Reference

https://sass-guidelin.es/ko/

https://poiemaweb.com/sass-basics