[CSS] SCSS 개념 및 사용법

이번 포스팅에서는 SASS 에 대해 알아보겠다.

What?

SASS 는 전처리기(Preprocessor)이다. 근데 이제 CSS 로 컴파일 해주는 기능을 곁들인..

Why?

CSS 는 사용하기에 다소 불편한 감이 있다. 프로그래밍을 배우는 입장에서 굳이 CSS 를 그렇게 하나하나 다 입력하고 있어야 하나 라는 생각이 든다.

하지만 SCSS 는 프로그래밍 언어처럼 기능한다. 변수를 사용할 수 있고 다른 CSS 파일을 import 할 수 있으며 CSS 를 nesting 하게 짤 수도 있다. 또한 복붙 대신 extends 를 사용할 수도 있고 함수처럼 기능하는 mixin, include 를 사용할 수도 있다.

위에 기술한 내용에 대해서는 후술할 예정이니 일단은 그냥 되게 편하구나~ 하고 넘어가자

How?

우선 SASS 를 설치해야한다

npm install node-sass

🎯 변수

mainColor 라는 변수를 사용하고자 할 때 다음과 같이 사용하면 된다.

$mainColor: #ff0000;

.red {
  color: $mainColor;
}

🎯 @import

CSS 스타일 중에 자주 시용하는 것을 우선 _reset.scss 라는 이름으로 만들어보자.

// (_reset.scss)

body {
  margin: 0;
}
div {
  box-sizing: border-box;
}

그 다음 _reset.scss 를 App.scss 에 똑같이 적용하려 한다. 이 때, import 를 사용하면 된다.

// (App.scss)

@import "./_reset.scss"...;

🎯 nesting

nesting 은 CSS 선택자 중 한칸 띄어쓰기와 동일하게 기능하는 구조로 아래 두 번째 코드와 같이 사용한다.

즉, 아래 두 코드가 같은 기능을 한다.

div.container h4 {
  color: blue;
}
div.container p {
  color: green;
}

div.container {
  h4 {
    color; blue;
  }
  p {
    color: green;
  }
}

🎯 @extends

entend 는 비슷한 스타일이지만 한 끗 다른 스타일을 작성할 때 복사 붙여넣기 대신 쓸 수 있는 기능이다. 다음과 같이 사용한다.

.my-alert {
  background: #eeeeee;
  padding: 15px;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
  margin: auto;
}

.my-alert-yellow {
  @extend .my-alert;
  background: yellow;
}

🎯 @mixin/ @include

@mixin 은 함수와 같이 기능한다. 즉 코드를 축약하고 재사용 하는 용도이다. 다음과 같이 사용한다.

@mixin redFont() {
  background: #eeeeee;
  color: red;
  font-size: 25px;
}
.my-alert {
  @include redFont();
}

이 외에도 SCSS 에는 반복문 등 다양한 기능이 있으니 추가로 찾아보길 바란다.