[React Basic] SASS의 세번째 버전 SCSS

frontend, react, SCSS

SCSS

  • SCSS는 SASS의 3번째 버전에 추가
  • SASS의 모든 기능을 쓸 수 있음
  • CSS와 호환도 잘됨

특징 및 주요 문법

자세한 내용은 sass-lang.com/guide, sass-lang.com/documentation 참고

$를 통한 변수 선언 -> 중복 제거 및 재사용

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

중첩 작성 방식을 통한 시각적 계층 구조 표현

    div {
    background-color: green
      &:hover { background-color: blue }
    }
    
    .div {
      background-color: green
      &_blue { background-color: blue }
    }

일부 SCSS 분리를 통한 CSS 모듈화 -> @use 사용

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

  li { display: inline-block; }

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

mixins 사용으로 CSS 선언 그룹을 만들 수 있음, 함수처럼 사용

@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);
}

@extend 사용으로 속성 집합을 공유할 수 있음

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

- +, -, *, math.div(), % 연산자를 사용 할 수 있음

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

설치

npm install을 통해 다음 패키지들을 설치

  • node-sass
  • open-color
  • sass-loader
  • classnames


쿠팡 파트너스 활동을 통해 일정액의 커미션을 제공받을 수 있습니다.