[CSS] CSS, SASS, SCSS 차이점, 사용방법

 

⏲ TL;DR

• SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어
• SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가
• SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식
• 전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS 보다 더 많음
• SASS보다 SCSS가 CSS와의 호환성이 더 좋음

 

SCSS                                                                                              SASS

 

 

🤔 CSS는 잘 알지만 SASS? SCSS??

CSS : Cascading Style Sheets - 종속형 시트

SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트

SCSS : Sassy CSS - 문법적으로 짱 멋진(Sassy) CSS

full-name으로 봤을 때 SASS, SCSS 둘 다 문법적으로 어썸한 CSS라는 뜻을 가지고 있습니다. SCSS의 경우 SASS보다 뒤에 나왔고(SASS 3 버전에서 SCSS가 생겨남) 약간의 문법 차이가 있지만 SCSS가 좀 더 넓은 범용성과 CSS의 호환성의 장점을 가집니다. 큰 차이점은 SASS는 중첩으로 들여 쓰기를 사용하고 속성 구분은 줄 바꿈을 이용하지만 SCSS의 경우 중괄호로 중첩을 표현하고 세미콜론으로 속성을 구분합니다. 

또한 공식 레퍼런스는 SASS보다 CSS와 더 비슷한 SCSS를 선호한다고 합니다. 그리고 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하며, 사용자 수는 SASS보다 SCSS가 더 많습니다. 

 

<2012년 css-tricks.com에서 12,712명의 사용자로부터 받은 응답>

 

 

👀 사용하는 이유

css가 그렇게 복잡한 언어는 아니지만 프로젝트의 크기가 커지고 고도화될수록 유지보수에 큰 어려움이 생기게 됩니다. 예를 들어 기존의 CSS는 불필요한 선택자(Selector), 연산 기능 한계, 구문(Statement)의 부재의 문제점이 있고 SASS와 SCSS는 이러한 이슈를 해소시켜줄 수 있습니다.

팀 프로젝트로 진행한 CSS 파일 상태 (React 기반 Web)

통상적으로 SASS보다 SCSS를 사용을 많이 하는데 SCSS의 경우 CSS문법과 완벽하게 호환이 되는 장점 또한 가지고 있습니다. 또한 코드의 가속성과 재사용성을 높여주며 심플한 표기법으로 CSS 구조를 평준화할 수 있습니다.

 

 

⚙️ 제공하는 기능 / 예시

• 변수(Variable) 할당
• 중첩(Nesting) 구문
• 모듈화(Modularity)
• 믹스인(Mixins)
• 확장&상속(Extend/Inheritance)
• 연산자(Operators)

 

1. 변수(Variable) 할당

/* CSS */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

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

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

자주 사용하는 색이나 폰트 등등 변수로 지정하여 재사용할 수 있습니다.

 

2. 중첩(Nesting) 구문

/* CSS */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/* SCSS */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

중첩기능을 통해 쉬운 구성과 높은 가독성을 가질 수 있습니다.

 

3. 모듈화(Modularity)

/* CSS */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

/* _base.scss */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

/* styles.scss */
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

@use를 사용하여 파일을 분할하고 모듈화 할 수 있습니다.

 

4. 믹스인(Mixins)

/* CSS */
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

/* SCSS */
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

함수처럼 defalut parameter를 지정할 수 있고 parameter를 받아서 속성을 부여할 수 있습니다. (재사용성)

 

5. 확장&상속(Extend/Inheritance)

/* CSS */
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

/* SCSS */
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* This CSS won't print because %equal-heights is never extended. */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

@extend 사용 시 css 속성 집합을 상속받을 수 있습니다.

 

6. 연산자(Operators)

/* CSS */
.container {
  display: flex;
}

article[role="main"] {
  width: 62.5%;
}

aside[role="complementary"] {
  width: 31.25%;
  margin-left: auto;
}

/* SCSS */
@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

math.div(나누기) 외에도 sin, cos, tan, random, max, min 등등 여러 가지 수학적 기능을 사용할 수 있습니다.

 

 

✔️ SASS, SCSS가 적용되는 원리

SASS, SCSS를 CSS pre-processor(전처리기)라고도 하는데 스크립팅 언어이기 때문에 SASS, SCSS로 작성된 파일들은 곧바로 웹에 적용될 수는 없습니다. 웹은 기본적으로 CSS파일로 동작하므로 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용하게 됩니다.

 

 

💣 단점

• 전처리기를 위한 도구 필요
• 컴파일 시간 소요

 

 

✒️ 마치며

저의 경우 기존의 프로젝트를 진행하면서 프로젝트 크기가 커질수록 CSS파일 수도 많아지고 Div Class명 짓는 것도 굉장히 난감했던 적이 많았습니다. 평소에 선택자를 사용해가면서 CSS를 작성했을 때 코드에 중복되는 부분이 많이 보였고 뭔가 리팩터링 하고 싶은 열망이 있었으나 당시에는 SCSS의 존재를 몰랐었습니다. 최근에 들어서야 SCSS를 알아보게 되면서 새로운 프로젝트에 적용해봤고, 코드 재사용성, 가독성, 유지보수성 등등 많은 차원에서의 이점을 몸소 체험할 수 있었습니다. 물론 간단한 프로젝트이고 코드량이 작다면 그냥 CSS를 쓰는 것이 좋지만 프로젝트의 크기가 커질수록 SCSS 사용의 장점이 두각 되므로 한번 사용해보시는 것을 추천드립니다.

 

 

📚 참고

https://sass-lang.com/guide