SASS, SCSS

마크업 부서에서 SASS, SCSS 라는 용어를 사용하고 있어 어떤 것인지 궁금하여 서칭해보게 되었다.

 

SASS, SCSS

SASS, SCSS는 CSS를 더 편리하게 사용할 수 있도록 지원하는 스크립트 언어이다. SASS, SCSS는 직접 동작되는 것이 아니다. SASS, SCSS가 제공하는 문법을 바탕으로 코드를 작성한 이후, 이를 컴파일하여 CSS 파일을 만들어 사용한다. 즉, SASS와 SCSS는 CSS를 효율적으로 만들어내기 위한 도구이다.

 

CSS는 작업이 커지고 코드가 많아질수록 불편함이 있다. CSS는 선택자를 만들 때 매번 부모 요소 선택자를 만들어야 하고, 구문이 없어 중복되는 코드가 많다. 이 때문에 유지보수가 불편하다는 단점이 많다.

 

반면 SASS(SCSS)는 CSS를 구조화하여 표현할 수 있고, 변수, 조건문, 반복문, 함수, 상속 등의 개념을 사용할 수 있다. 또한 선택자의 중첩으로 반복되는 부모요소 선택자 사용을 줄일 수 있다. (하단 참고자료의 블로그에서 예시와 함께 매우 잘 나와있다)

 

SCSS는 SASS 3버전에서 등장한 언어로, 유사하나 아래와 같이 구문을 사용하는 형태는 다르다. (코드 출처: 위키백과) 전세계적으로는 SCSS 를 더 많이 사용하고 기존 CSS와 문법이 비슷해서 SCSS를 더 선호하는 것 같다.

 

SCSS 스타일

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

 

SASS 스타일

table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.3em

---

참고자료

Sass(스타일시트 언어), https://ko.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)

내가 보려고 만든 SCSS 정리, https://velog.io/@5o_hyun/SCSS

SaSS & SCSS 소개 & 설치 세팅 총정리, https://inpa.tistory.com/entry/SCSS-%F0%9F%92%8E-SassSCSS-%EB%9E%80-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%BB%B4%ED%8C%8C%EC%9D%BC