Sass나 SCSS를 쓰는 이유

1. Sass(Syntactically Awesome StyleSheets)

• Sass는 CSS 코드를 효율적으로 작성하기 위해 사용하는 프로그래밍 언어이다.
• Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나이다. 브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트 하는 과정을 거친다.
• 웹 업계에서 실제 많이 사용하는 전처리기이다.

2.Sass나 SCSS를 쓰는 이유

• 스타일시트가 점점 더 커지고 복잡해지며 유지관리가 어려워지고 있기 때문이다.
• Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에 없는 편의 긴으들이 있어 시간을 절약할 수 있다.
• 코드 재사용이 가능하다.

3. Sass가 이용되는 방식

• .sass 기술방식과 .scss 방식 -> 다른 파일 확장자를 사용한다.
• Sass와 Scss가 있는데 그 중에서 일반적으로 CSS와 좀 더 유사한 SCSS를 사용한다. 왜냐하면 SCSS는 CSS와 동일하게 중괄호를 사용하는 방식이기 때문이다.

4. Sass와 SCSS는 어떤 차이가 있는가?

//SCSS

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body{
	font: 100% $font-stack
    color: $primary-color
   }

//Sass

$font-stack: Helvetica, sans-serif
$primary-color:#333

body
	font: 100% $font-stack
    color: $primary-color

• Sass와 SCSS 모두 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어.
• Sass는 들여쓰기와 줄바꿈의 형식.
• SCSS는 중괄호, 세미코론의 형식이므로 CSS와 작성 방법이 유사하다. (CSS 친화적이고 호환성이 좋다.)
• 전세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리 & 프레임워크 수가 Sass 보다 더 많다.
• Sass 전처리기는 SCSS도 CSS로 컴파일해주기 때문에 배울 때 SCSS로 배우는 것이 유리하다.=> 사용이 편하고 라이브러리가 더 많아서 이용할 수 있는 영역이 넓으므로.

 

---

참고

 

https://cocoon1787.tistory.com/843

[CSS] CSS, SASS, SCSS 차이점, 사용방법

 

40 minutes Basic Sass (도서)

 

https://youtu.be/YqmJWF4o700