Sass(SCSS)

최종 수정 : 2024-04-18

Sass(SCSS)

css는 웹 표준이기 때문에 문법이 빠르게 바뀌지 않는다. 그래서 개발자들이 사용하기 편한 여러가지 문법을 추가한 새로운 언어를 만들기 시작했다. 그 중에 가장 많이 쓰이는 것이 바로 Sass이다.

 

변수, 네스팅(Nesting) 문법, 믹스인(Mixin) 등등 다양한 기능을 제공한다. 이 중에서 변수와 네스팅 등은 웹 표준으로 흡수되기도 했다.

 

Sass는 프리프로세서(Preprocessor) 스크립트 언어라고 하는데, 프로그램을 통해서 Sass 코드를 CSS로 변환한다. Sass에는 기존 Sass와 SCSS 두 가지 문법이 있는데, 최근에는 CSS의 모든 문법 위에서 확장된 문법을 사용하는 SCSS를 많이 사용한다.

 

장점

파일을 분리하고 부럴 올 수 있기 때문에 규모가 큰 코드를 관리하기 좋다.

반복되는 CSS 코드를 줄여주는 다양한 문법이 있어서 작업 효율이 좋다.

 

단점 및 한계

여전히 CSS 클래스 이름이 충돌할 가능성이 있다.

---

네스팅 예시

자식 선택자를 객체처럼 한 묶음으로 표현한 형태

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

  li { display: inline-block; }

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

nav li {
  display: inline-block;
}

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

---

믹스인 예시

공통된 속성을 함수처럼 사용하는 형태

@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);
}
/* ------------------------------------------------ */
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(DarkGray, .25);
  color: #fff;
}

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

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

---

참고 자료

https://sass-lang.com/guide/

Sass: Sass Basics