개발/HTML+CSS

CSS, SASS, SCSS

쓱싹디벨로퍼 2024. 3. 25. 11:02

CSS에 대해서는 잘 안다고 할 수 있지만 사실 SASS, SCSS는 단어도 비슷해서 차이점과 각각 무엇인지에 대해서는 정확하게 알지 못했다. 그래서 이번에 정리해보려고 한다.

간략히 설명하자면, CSS는 쉽지만 선택자(Selector)의 과용(중복 사용등)과 연산 기능의 한계, 구문(Statement)의 부재 등으로 작업이 고도화되고 프로젝트의 규모가 커질수록 불편함이 생긴다.

그래서 이를 보완하기 위해 CSS의 전처리기(Pre-processor)로 대표적인 SASS와 SCSS가 탄생하게 된다. 그리고 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

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

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

여기서 SASS와 SCSS를 전처리기라고 하는 이유는?

이는 Sass자체로 브라우저에 적용하는 것이 아니라 CSS를 확장해서 쉽고 편리하게 쓰기 위해 쓰는 스크립팅 언어이기 때문에 SASS와 SCSS로 작성한 코드는 컴파일을 해서 일반 CSS의 문법으로 바꾼 뒤 적용할 수 있기 때문이다.

코드 비교

CSS

.list {
  width: 100px;
  float: left;
  }
li {
  color: red;
  background: url("./image.jpg");
  }
li:last-child {
  margin-right: -10px;
  }

SASS

특징 : 들여쓰기와 줄 바꿈 기반 문

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

SCSS

특징 : 중괄호{}와 세미콜론;기반 문법

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

원조 Sass vs 후발주자 SCSS

CSS를 좀 더 간편히 작성하는데 초점을 두었던 SASS는 기존 CSS의 문법과 많이 달라서 입문하기 어려운 단점이 있었다. 그래서 이를 보완한 SCSS가 나오게 되는데 이는 CSS와 유사한 문법을 가지고 있으며 SASS의 모든 기능을 지원한다.

Sass와 SCSS의 차이점

선택자 구분

SASS : 들여쓰기로 구분
SCSS : 중괄호{}로 구분

Mixins(재사용 가능한 기능을 만드는 방식) 기능의 사용법

SASS : **=**와 + 기호로 Mixins 기능을 사용

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

SCSS : @mixin과 @include로 기능을 사용
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

어떤 걸 쓰는 게 좋을까?

읽기 쉽고 빨리 쓸 수 있어 Sass 문법을 더 좋아하는 사람들이 있습니다. 하지만 아래의 이유로 SCSS를 쓰기를 권장한다.

공식 문법: 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여줍니다.
더 넓은 사용자: 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하는 등 새로운 문법이 더욱 널리 쓰입니다.
CSS 호환성: 친근한 CSS 문법은 Sass와 CSS 사이의 심리적 틈을 줄여주고, 기능적으로도 확장성을 높입니다.
여러 줄 쓰기 지원: Sass 문법은 들여 쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에, 반대로 여러 줄 쓰기를 지원하지 않습니다 SCSS : **@mixin**과 **@include**로 기능을 사용

SASS문법은 멀티라인 작성 시 컴파일 에러가 발생한다. 아래 참고

// 컴파일 에러 발생
$breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1024px
)

// 꼭 한 줄에 작성해야 합니다
$breakpoints: ( sm: 480px, md: 768px, lg: 1024px )

참고

728x90