[Sass] Sass란 ?

Sass는 기능이 뛰어나고 안정적인 CSS 확장 언어이다.

Sass란 ?

SASS는 CSS를 효율적으로 작성할 수 있도록 도와주는 CSS 확장언어 이자 전처리기(CSS Preprocessor) 입니다.

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

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

SASS는 { }중괄호와 세미콜론 ( ; )은 사용하지 않고, '들여 쓰기'와 '줄 바꿈' 형식으로 문법을 사용합니다. 또한 변수 정의를 허용하는데, 변수는 $ 기호로 시작되고, 변수 할당은 콜론(:)으로 마무리합니다.

 

CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 집니다. CSS 코드 내에서 동일한(혹은 유사한) 코드를 재사용하기 위해서 할 수 있는 유일한 조치는 '복사 & 붙여넣기' 뿐이며, 이는 무척 귀찮고, 짜증나고, 또 실수를 유발하는 작업입니다. 

 

Sass는 앞서 언급한 CSS의 치명적 단점을 보완할 수 있는 몇 가지 방법 중 단연 최선의 방법입니다. 

 

Sass는 컴파일 과정을 통해 CSS 파일을 생성해 주는 CSS의 확장 언어이자 전처리기(preprocessor)로써, CSS에는 존재하지 않는 다양한 기능들을 가지고 있습니다. 

 

그리고 이 기능들은 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는 데 도움이 됩니다. 

👉🏻 기존의 CSS의 유지보수의 불편함과 코드 중복 등을 SASS를 사용하여 해결 할 수 있다 !

 

한 가지 주의해야 할 점은, Sass는 CSS의 대체 언어가 아니라는 점입니다. Sass는 CSS의 확장 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈입니다.

 

Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차입니다.

 

Sass를 사용하는 이유

• 호환성: 모든 버전의 CSS와 완벽하게 호환된다.
• 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다.
• 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다.
• 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다.
• 신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다.
• 확장성: Sass 기반의 프레임워크가 다수 존재한다.

Sass는 CSS가 가지고 있지 않는 유용한 기능들을 지원합니다. 그리고 이 기능들의 존재 목적은 결국 한 가지, 생산성을 위한 것입니다. 

 

코드를 빠른 시간 안에 간결하게 작성할 수 있도록 해 주고, 코드 수정 시에 신경 써야 할 부분을 최소화해주는 효과도 있습니다. Sass가 제공하는 기능으로는 변수, 네스팅, 믹스인 등이 대표적입니다.