CSS 전처리기 Sass/SCSS

zne·2021년 7월 4일

CSS란?

CSS(Cascading Style Sheets)는 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이며 웹 페이지에 스타일과 레이아웃을 적용할 때 사용한다.

SCSS와 Sass는 무엇일까?

Sass는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다.

Sass는 CSS의 전(예비)처리기와 그 구문을 의미하며, 쉽게 말해 CSS로 컴파일되는 스크립트 언어이다.

Sass와 SCSS의 차이

기존의 CSS 문법에 들여쓰기가 가능한 Sass가 등장했고, 그 후에 Sass와 CSS 사이의 차이를 좁히기 위해 좀 더 CSS 친화적인 SCSS 구문이 등장했다. SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다.

Sass와 SCSS는 기능적으로 봤을때 유의미한 차이가 없으며, 문법적인 방식에서 차이가 있다. Sass와 SCSS의 핵심적인 차이는 {}(중괄호)와 ;(세미콜론)의 유무이다.

Sass는 선택자의 유효범위를 들여쓰기로 구분하고, SCSS는 중괄호 {}로 구분한다.
Sass는 세미콜론;을 사용하지 않는다.

Sass

.list
  width: 100px
  li
    color: white;
    background-color: black; 
    &:last-child
      margin-right: 10px

SCSS

.list {
  width: 100px;
  li {
    color: white;
    background-color: black; 
    &:last-child {
      margin-right: 10px;
    }
  }
}

SCSS와 Sass의 장단점

장점

중첩(Nesting) 기능으로 상위 선택자의 중복 사용을 피할 수 있다.

/*_Modal.scss*/

.confirm-modal-content {
  width: 20vw;
  height: 17vh;
  position: absolute;
  & > div:first-child {
    margin-top: 40px;
    font-size: 1.2rem;
  }
  & > div:last-child {
    margin-bottom: 15px;
  }
}

반복적으로 사용하는 값을 변수로 지정할 수 있다.

/*_Title.scss*/

$box-color: red;

.title-box {
  font-size: 2rem;
  background-color: $box-color;
}

CSS 코드를 여러 파일로 분할 가능하기 때문에 유지보수가 쉽다.
CSS을 여러 파일로 나눌 경우 CSS를 다운로드 하기 위한 다수의 http요청이 발생해 비효율적)

/*_App.scss*/

@import "../Title"
@import "../Modal"
/*여러 scss 파일을 불러와서 사용 가능*/

조건문, 반복문, 함수 등 프로그래밍적 요소들을 지원해 효율적인 코드작성이 가능하다.

단점은 없을까?

전처리기를 위한 도구가 필요하다.
다시 컴파일 하는 데 시간이 걸린다.

CSS 전처리기가 효율적인 코드를 작성할 수 있게 도와주지만 모든 코드에 필수적으로 사용해야하는 것은 아니다. 중첩, 변수, Mixin등 기본적인 기능의 사용으로도 CSS로만 작성할 때 보다 편리한 코드를 작성할 수 있으며, 나머지 프로그래밍적 요소들은 상황에 따라서 적용하는 것이 좋을 것 같다.