[CSS] SASS와 SCSS

이번 시간에는 CSS를 지원하는 라이브러리 중 제일 간단하고 스타일리시하게 css를 구성하는 SASS와 SCSS를 알아보자.

 

SASS 란?

SASS(Syntactically Awesome StyleSheets)는 CSS의 pre-processore로서 CSS의 한계와 단점을 보환하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 확장 기능(extension)이다.

 

CSS를 배우기 쉬워 프로젝트 초기단계에서는 문제가 없지만 프로젝트가 커질수록 코드가 복잡해지고,

스타일시트도 같이 관리할게 많아지면서 더욱 복잡해진다. 따라서 추가 및 수정 등 유지 보수에 힘이 들어간다.
SASS는 한마디로 CSS를 구조화하여 개발의 편의성을 높여준다.

 

정리하자면 SASS는

• CSS보다 더욱 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않은 Mixin 등의 강력한 기능을 활용해 CSS 유지보수 편의성을 큰폭으로
  향상할 수 있다.

SASS 표기법

 

확장자. sass

.itemWrapper 
  width: 100%;
  height: 100%;
  ul 
    margin: 10px
    padidng: 20px
  	box-shadow:
            0 1px 3px 0 rgba(0, 0, 0, 0.2),
            0 1px 1px 0 rgba(0, 0, 0, 0.14),
            0 2px 1px -1px rgba(0, 0, 0, 0.12)

SCSS 란?

SCSS(Sassy CSS)는 SASS의 3.0 버전부터 도입돼 좀 더 CSS와 친화적인 문법을 제공한다.

SCSS는 CSS와 거의 같은 표기법으로 SASS 기능을 지원하며, 그냥 SASS와 같다고 해도 무방하다.

다만 기존의 SASS와의 문법의 조그마한 차이가 있는데, SASS 표기법 보다 실무에서는 CSS에 친화적인

SCSS 표기법을 사용하는 경우가 더 많다고 할 수 있다.

 

.itemList {
   width: 100%;
   height: 100%;
   li {
     margin: 10px;
     margin-right: 1.5px;
     background:red;
     box-shadow:
            0 1px 3px 0 rgba(0, 0, 0, 0.2),
            0 1px 1px 0 rgba(0, 0, 0, 0.14),
            0 2px 1px -1px rgba(0, 0, 0, 0.12);
    
   }
}

SCSS는 기존 SASS에서 중괄호 ( {} )가 추가되었으며, 세미콜론 (;)이 추가되었다. 두 개만 추가되었는데도

객체 형식으로 확실히 가독성이 증가하였다.

 

Compile

SACC & SCSS는 Less, Stylus와 함께 전처리기(Preprocessor)이다. 우리가 CSS를 적용하는
웹에서는 CSS밖에 모르기때문에 SASS, SCSS, LESS 등을 웹에서는 읽지 못한다.

따라서 SASS(SCSS)로 따로 스타일을 작성 후에 별도의 컴파일러를 통해 웹에서

읽을 수 있도록 CSS형태로 변환하는 작업이 필요하다.

아래 사이트에서 SASS(SCSS) 문법을 CSS로 변환해주는 작업을 수행할 수 있다.

SassMeister | The Sass Playground!

---

그래서 왜 쓰는데?

기존의 CSS가 그렇게 복잡한 언어는 아니지만 작업이 크고 고도화될수록 불편함이 생긴다.

 

이에 SCSS와 Sass에서는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커짐에 따라서 복잡해지는 CSS 작업을 쉽게 해 주며 가독성과 재사용성을 높여주어

유지보수가 쉬워지게 도와주는 역할을 담당한다.

 

그리고 CSS의 태생적 한계를 보안하기 위한 Sass는 다음과 같은 추가 기능과 유용한 도구를 제공한다.

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance
  CSS와 비교하여 Sass는 아래와 같은 장점이 있다.

CSS보다 심플한 표기법으로 CSS를 구조화해 표현할 수 있다.

스킬 레벨이 다른 팀원들과의 작업 시 발생하는 구문의 수준 차이를 평준화시킬 수 있다.

CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용해 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.

 

참고 자료

CSS & SCSS & SASS

SASS와 SCSS