SASS, SCSS란

scss(sass)란?

Syntactically Awesome StyleSheet의 약어이며, CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기

SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가

 

.sass란?

SASS는 CSS의 전처리기, 즉 해석되어 CSS로 컴파일되는 스크립트 언어이다.

SASS는 { }중괄호와 세미콜론 ( ; )은 사용하지 않고, 들여 쓰기+줄 바꿈 형식으로 문법을 사용한다

또한 변수 정의를 허용하는데, 변수는 $ 기호로 시작되고, 변수 할당은 콜론(:)으로 마무리한다.

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

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

 

 

.scss란?

CSS와 완전히 호환되도록 새로운 구문을 도입한 CSS의 상위 호환 스타일시트이다.

SASS기능을 지원하되, 중괄호+세미콜론을 사용하는 등 CSS와 거의 같은 문법형식이다

전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS 보다 더 많음

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

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

 

 SCSS - SASS를 사용하는 이유? 

css가 복잡한 언어는 아니지만 프로젝트의 크기가 커질수록 유지보수에 큰 어려움이 생기게 됩니다.

예를 들어 기존의 CSS는 불필요한 선택자(Selector), 연산 기능 한계, 구문(Statement)의 부재의 문제점이 있고 SASS와 SCSS는 이러한 이슈를 해소시켜줄 수 있습니다.

 

 

 

 

 

 

https://sass-lang.com/guide

Sass: Sass Basics