Sass에 대한 개요와 중첩에 대해 정리한 글입니다.

Sass란?

CSS로 컴파일되는 스타일 시트 확장 언어로 CSS 전처리기의 하나이다. CSS가 동작하기 전에 사용하는 기능으로, 개발은 Sass를 기반으로 한 후, CSS로 컴파일한다.

Sass, SCSS 쓰는 이유
작업이 고도화될수록 불필요한 선택의 과용, 연산 기능의 한계 등으로 유지관리가 어려워진다.
➡️ Sass를 통해 네이스팅, 믹스인, 가져오기의 편의 기능을 사용하여 시간을 절약할 수 있다.
➡️ 코드 재사용이 가능하다.

Sass, SCSS의 차이점
SCSS는 CSS 구문과 완전 호환이 가능하도록 Sass의 모든 기능을 지원하는 CSS의 상위집합이다.

SCSS는 {} (중괄호), ;(세미콜론)을 사용하지만 Sass는 존재하지 않고 mixin 기능에서 SCSS는 @mixin과 @include 기능을 사용하지만 Sass는 =, + 기호를 사용한다.

파일분리

코드들을 편리하기 관리하기 위해 _header.scss, _main.scss 프레임 별로 CSS를 분리하고 _variable.scss, _mixin.scss 파일도 따로 분리한다. 그리고 style.scss로 분리했던 파일을 import한다.

언더바_를 사용하는 이유
언더바()를 붙이지 않으면 분할된 파일들 모두 컴파일되기 때문에 언더바()를 붙여 header 파일임을 알려줘 내부에서 @import 형태로 동작하게 된다.

💡 Sass에서 import할 때 확장명없이 파일명만 사용할 수 있다.

주석
CSS의 주석은 /* 주석입니다 */이었지만
Sass(SCSS)는 두 가지 스타일의 주석을 사용한다.

// 컴파일되지 않는 주석
/* 컴파일되는 주석 */

중첩 (Nesting)

상위 선택자 반복을 피하고 CSS코드를 구조화하여 가독성이 높아지고 유지보수가 편리하다.

ul {
    border: 1px solid #ddd;
    li {
        background-color: pink;
        color: gray;
    }
}

ul {
  border: 1px solid #ddd;
}
ul li {
  background-color: pink;
  color: gray;
}

Ampersand (상위 선택자 참조)

&는 상위 부모선택자를 가리킨다.

• & 을 이용하여 after, hover 등의 가상요소, 가상 클래스를 참조할 수 있다.

.del-btn {
    color: red;
    &:hover {
        background-color: red;
    }
}

.del-btn {
  color: red;
}
.del-btn:hover {
  background-color: red;
}

• & 를 응용하여 같은 클래스명을 가진 선택자들을 중첩시킬 수 있다.

.box {
    &-pink {
        background-color: pink;
    }
    &-gray {
        background-color: gray;
    }
    &-blue {
        background-color: blue;
    }
}

.box-pink {
  background-color: pink;
}
.box-gray {
  background-color: gray;
}
.box-blue {
  background-color: blue;
}

@at-root

중첩에서 벗어나고 싶을 때 사용한다.
⚠️ 중첩 안에서 생성하지만 중첩에서 벗어난다.

.box {
    width: 100px;
    height: 100px;
    @at-root span {
        color: pink;
    }
}

.box {
  width: 100px;
  height: 100px;
}
span {
  color: pink;
}