[Sass] Sass란 무엇인가? & 기본 문법

🎨 Sass

Syntactically Awesome Style Sheets

CSS 파일로 변환되는 스타일 시트 언어

😑 CSS는...

• 프로젝트 규모가 커질수록 중첩된 스타일 구조와 빈번한 수정 때문에 유지보수가 어려워짐

  ➡️ Sass는 변수, 중첩 규칙, Mixin, 함수 등 사용하여 CSS를 구조화하여 표현하거나 스타일 요소를 재사용할 수 있음

❔ SCSS

Sass 3.0 이상부터 사용 가능한 표기법으로, CSS 구문과 호환됨

기존 문법

.nav-list
  display:flex
  list-style:none
  li
    margin-right: 10px

SCSS 문법

.nav-list{
  display:flex;
  list-style:none;
  li{
    margin-right:10px;
  }
}

➡️ 블록({})과 세미콜론(;)을 사용하여 훨씬 CSS 친화적, 현재는 Sass를 사용할 때 대부분 SCSS 표기법 사용

기본 문법

1️⃣ Nesting

CSS를 블록 단위의 스코프로 묶어 자식 선택자들의 스타일을 정의하는 것

동일한 부모 선택자를 가진 스타일들을 구조화 ➡️ 코드 가독성 향상

스타일 프로퍼티에도 적용 가능 ex) font-weight, font-style => font:{}

header {
  h1 {
    font:{
      style:italic;
      weight: bold;
    }
  }
}

2️⃣ 변수 선언($)

$ 기호로 시작하는 문자열로 변수 선언 가능

공통된 스타일의 반복 작성을 피함 ➡️ 코드의 재사용성 향상

블록 스코프 단위로 변수 선언➡️ 스코프별로 필요한 변수를 독립적으로 관리

$font_color: #222;

body{
  $max_width: 1000px;
  color: $font_color;
}

3️⃣ Parent 선택자(&)

부모 선택자를 참조하는 선택자, Sass에서만 사용 가능

의사 클래스를 추가하거나 부모 선택자와 다른 선택자를 조합하여 사용 가능

.title{
  &:hover{ // .title:hover과 동일
    color:$hovered-color;
  }
}

4️⃣ Shadowing

Sass의 지역 변수는 전역 변수의 값을 덮어쓰지 않음을 뜻함

의도적으로 전역 변수의 값을 지역 변수의 값으로 덮어쓰고 싶은 경우, !gloabl 옵션을 사용

$padding: 10px;

.list{
  $padding: 20px;
  padding: $padding; // 20px
}

.list{
  $padding: 20px !global; // 전역 변수 $padding의 값을 20px로 변경
  padding: $padding;
}

5️⃣ 타입과 연산자

기본적인 산술 연산자, 문자열 병합 연산자(+), 동등 및 비교 연산자 제공

타입	설명
Numbers	숫자와 단위로 이루어짐 ex) 15px ➡️ 15(숫자)+px(단위)
Strings	따옴표를 사용하는 경우와 사용하지 않는 경우 모두 문자열로 인식 ex) 'string', string
Colors	16진수 코드(#ffffff), CSS 색상명(red), rgb(), rgba(), hsl(), hsla() 형태 사용 가능
Lists	데이터를 콤마(,)나 공백으로 구분하여 리스트로 표현 가능 ex) (Helvetica, Arial, sans-serif)
Maps	괄호 안에 이름:값 형태로 맵을 정의, map-get 내장 함수를 사용하여 맵의 값을 가져올 수 있음
Boolean	true, false | 주로 @if 조건문에서 사용
null	값이 없음을 의미하며, null 값이 할당된 스타일 프로퍼티는 트랜스파일 후 제거됨
Functions	함수도 값으로 사용 가능, 함수 자체를 직접 사용할 순 없지만 meta.get-function() 내장 함수와 meta.call() 내장 함수로 함수를 전달하고 호출할 수 있음

6️⃣ at-rules

조건문, 반복문, 함수, 가져오기 등 다양한 기능을 at-rules라는 규칙으로 제공

모든 규칙은 @문자를 앞에 붙여 나타냄

함수

@function으로 선언, @return으로 결과값 반환

$margin: 10px;

@function get-added-default-margin($target){
  @return $margin + $target;
}

.description{
  margin-top: get-added-default-margin(5);
}

mixin

@mixin으로 선언, @include로 불러올 수 있음

함수가 결과로 값을 반환한다면, mixin은 스타일 자체를 반환

@mixin flexbox{
  display: -webkit-box;
}

가져오기

다른 스타일 시트의 스타일과 mixin, 함수, 변수에 대한 접근 가능

Sass 파일의 가져오기는 트랜스파일 시 처리됨

@use 규칙을 사용하여 작성, 확장자는 생략 가능

❗@import도 가능하지만 향후 deprecate 예정 ➡️ 가급적 @use 사용

@import의 문제점

• 전역 namespace에 변수나 mixin이 생성 ➡️ 중복되는 이름이 있다면 에러 발생
• 가져오기 순서에 따라 트랜스파일링 실행 ➡️ 파일의 순서를 명확하게 정의해야 에러 발생하지 않음
• 외부로 노출하고 싶은 private 멤버를 처리할 수 없음

@use

Sass의 새로운 모듈 시스템으로, @import의 문제점 해결 가능

• 독립적인 namespace를 기반으로 변수나 mixin에 접근 가능
• private 멤버 처리 지원
• 중복 가져오기 문제 제거 등

// _var.scss
@use 'vars';

Partial

• 언더스코어(_)로 파일명 시작

• 가져오는 시점에 개별적으로 트랜스파일되지 않음

• 파일들을 가져오는 파일에서 일괄적으로 트랜스파일 실행

✏️참고 - 『기초부터 완성까지, 프론트엔드』 - 이재성, 한정