SCSS

CSS는 HMTL 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정이다. 하지만 프로젝트 규모가 커지거나 작업이 고도화될수록CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 된다코드의 재사용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS / SCSS라고 한다

CSS의 태생적 한계를 보완하기 위해 Sass는 유용한 도구들을 제공한다

 

<  SCSS(SASS)를 사용하는 이유  >

1. 선택자(selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야 한다.

2. 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든 것들을 수정&변경해야한다.

 

📍장점

1. 선택자의 중첩(Nesting)을 통해 반복되는 부모 요소 사용 줄일 수 있다.

2. 변수(Variable)를 사용해서 CSS 속성과 값을 일원화된 관리가 가능하다.

3. 조건문, 반복문을 사용해서 동적인 CSS관리 가능\

4. SCSS(SASS)는 CSS로 컴파일(Compile) 거쳐야 하는 번거로움이 있다. 하지만 거의 유일한 단점인 컴파일을 거쳐야 하는 문제를 해결할 수 있다.

 

*  컴파일(Compile)이란?

-  .CSS :  브라우저가 이해할 수 있는 파일

-  .SCSS  :  브라우저가 이해할 수 없는 파일.

-  .SCSS를 브라우저가 이해할 수 있는 파일로 바꾸는 작업을 뜻한다.

 

 

<  SCSS와 SASS의 차이점  >

:  SCSS ( Sassy Cascading Style Sheets : 매우 나이스한 CSS)

-  둘은 같다.

-  맨 처음 SASS가 먼저 생겼고 나중에 SCSS가 생겼다. 두 개는 완벽하게 호환된다.

-  유일하게 다른 점: 문법이 다르다

===>   {}(중괄호)와 ;(세미콜론)의 유무에 따른 사용 방식만 다르다.

 

-  .SASS 의 가독성이 떨어져서 .SCSS의 중괄호, 세미콜론을 CSS와 비슷하게 사용하므로 이해하기 더 쉽다.

-  파일 확장자 .SCSS

===> SASS라고 부르지만 SCSS를 지칭한다.

---

SASS는 전처리기

 

Sass는 CSS 전처리기(Preprocessor)라고도 한다.

CSS가 만들어지기 전에 이런저런 일들을 먼저 처리해주기 때문이다.