[SASS] SCSS 살펴보기

노마드코더 - CSS Layout 마스터클래스 강의를 정리한 내용입니다.

SCSS는 CSS에 다양한 편의 기능을 추가한 확장 버전으로, nesting, mixins, modules 등의 문법을 제공한다. 그러나 이 문법을 브라우저가 해석하지 못하기 때문에 전처리 과정이 필요하다. SCSS를 CSS로 SASS를 활요해 전처리한다.

Vite 환경에서는 npm add -D sass로 전처리기를 추가한다.

변수 사용

CSS에서는 변수를 선언할 때 :root 블록 안에 --를 prefix하여 선언한다. 변수의 사용은 var() 함수를 이용한다.

root: {
  --bgColor: red;
}

body {
  background-color: var(--bgColor);
}

SCSS에서는 $를 이용해 변수를 선언한다. CSS와 다르게 변수를 그대로 사용한다.

$bgColor: red;

body {
  background-color: $bgColor;
}

Nesting

어떤 태그의 자식 요소에만 스타일을 적용한다면, CSS에서는 태그 트리를 자세히 적어줘야 한다.

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 10px;
}

ul li {
  background-color: tomato;
  color: white;
  padding: 5px 10px;
  border-radius: 7px;
}

ul li a {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

여기에 hover 상태에 따라 li의 opacity와 a의 color가 변한다고 하자.

ul li:hover {
  opacity: 0.8;
}

ul li:hover a {
  color: gray;
}

이런 식으로 일일이 설정해야 한다.
SCSS에서는 Nesting 기능을 제공해 태그 안에 &를 이용하여 태그 안에 적을 수 있다.

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 10px;

  li {
    background-color: tomato;
    color: white;
    padding: 5px 10px;
    border-radius: 7px;
    a {
      text-decoration: none;
      color: white;
      text-transform: uppercase;
    }

    &:hover {
      opacity: 0.8;
      a {
        color: gray;
      }
    }
  }
}

Extend

@extend는 공통 로직을 확장하는 키워드이다.

스타일은 같고 배경만 다른 3개의 컴포넌트를 만든다면, 먼저 %를 이용해 공통 스타일을 작성한다.
컴포넌트마다 @extend %공통스타일을 확장하고, 개별적인 스타일을 덧입히면 된다.

%alert {
  margin: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px dashed black;
}

.success {
  @extend %alert;
  background-color: green;
}
.error {
  @extend %alert;
  background-color: tomato;
}
.warning {
  @extend %alert;
  background-color: yellow;
}

Mixins

@extend는 유용한 기능이지만, 반복되는 코드가 보인다. 이를 좀더 관리하기 편하도록 함수처럼 만들 수 있다. @mixin과 @include를 사용한다.

@mixin alert($bgColor, $borderColor) {
  background-color: $bgColor;
  margin: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px dashed $borderColor;
}

.success {
  @include alert(green, blue);
}
.error {
  @include alert(tomato, white);
}
.warning {
  @include alert(yellow, black);
}

@mixin으로 %alert을 alert()으로 변경해 반복되는 속성(background-color)을 인자로 받았다. 이를 사용하는 컴포넌트에서는 @include로 호출해 인자를 주입하면 된다.

만약 @include로 호출한 함수에 속성을 추가하고 싶다면 중괄호({})를 열고 안에 속성을 적는다. 그 후 @mixin에 @content를 추가하면 된다.

@mixin alert($bgColor, $borderColor) {
  /* ... */
  @content;
}

.success {
  @include alert(green, blue) {
    font-size: 12px;
  }
}
.error {
  @include alert(tomato, white) {
    text-decoration: underline;
  }
}
.warning {
  @include alert(yellow, black) {
    text-transform: uppercase;
  }
}

Responsive Mixins

@mixin을 이용해 반응형 속성을 쉽게 구현할 수 있다.

$breakpoint-sm: 480px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1200px;

@mixin smallDevice {
  @media screen and (min-width: $breakpoint-sm) {
    @content;
  }
}

@mixin mediumDevice {
  @media screen and (min-width: $breakpoint-md) {
    @content;
  }
}

@mixin largeDevice {
  @media screen and (min-width: $breakpoint-lg) {
    @content;
  }
}

@mixin xlDevice {
  @media screen and (min-width: $breakpoint-xl) {
    @content;
  }
}

mixin 안에 media querie를 설정한다.

body {
  @include smallDevice {
    background-color: blue;
  }

  @include mediumDevice {
    background-color: tomato;
  }

  @include largeDevice {
    background-color: purple;
  }

  @include xlDevice {
    background-color: brown;
  }
}

필요한 곳에서 @include를 호출하면 반응형으로 스타일링할 수 있다.