SCSS란?

CSS Preprocessor, CSS가 동작하기 전에 사용하는 기능으로 웹에서는 분명 CSS가 동작하지만 우리는 CSS의 불편함을 확장 기능으로 상쇄할 수 있음.

전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있음.

사용하기

• 중첩 가능, 훨씬 간단해 보임

section {
  width: 80vw;
  .content {
    padding: 2rem;
		font-size: 1.5rem;
    .date {
      font-size: 0.8rem;
    }
  }
}

section {
  width: 80vw;
}
section .content {
  padding: 2rem;
	font-size: 1.5rem;
}
section .content .date {
  font-size: 0.8rem;
}

• 변수처럼 사용 가능

$main-color: #de1825;         // $변수이름: 속성값;
$url-images: "/public/images/";
$w-width: 50rem;

.box {
  width: $w-width;
  margin-left: $w-width
  background: $main-color url($url-images + "bg.jpg");
}

• 재활용 가능

@mixin title-text {              // 스타일을 통으로 선언
  font: {
    size: 2.5rem;
    weight: 800;
    family: sans-serif;
  }
  color: $main-color;

  &::after {
    content: "??";
  }

h1 {
  @include title-text;           // 통으로 적용 가능
}
div {
  @include title-text;
}

• 매개변수 사용 가능

@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

@mixin dash-line($width: 1px, $color: black) { // :기본값
  border: $width dashed $color;
}

@mixin bg($width, $height, $bg-values...) {    // 가변인자 사용 가능
  width: $width;
  height: $height;
  background: $bg-values;
}

• 조건문 사용 가능

$width: 50rem;

div {
  width: if($width > 30rem, $width, null);
}

$color: orange;

div {
  @if $color == red {
    color: #fff;
  } @else if $color == green {
    color: #000;
  } @else if $color == blue {
    color: #c4c4c4;
  } @else {
    color: #purple;
  }
}

• 다른 파일에서 선언해 준 스타일을 불러올 수 있음
  • 나중에 common에 전체 스타일을 적용해서 불러와서 사용하면 다크모드도 쉽게 만들 수 있을듯!😊

// common.scss <- 전체파일에서 쓸 수 있는 글로벌 스타일 선언

@mixin shadow {
  position: fixed;
  top: 3rem;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

// Notibar.module.scss 

@import './common.scss'; // <- 불러와서

.shadow {
  @include shadow;       // 사용
}

// Menubar.module.scss

@import './common.scss';

.shadow {
  @include shadow;
}

• 계산이 가능함!

.mainWrap {
	height: calc(100vh - 4rem); // 다른 단위도 알아서 계산 가능한 똑똑이!
}