SCSS (CSS Modules)란?

SCSS란?

• Sassy CSS(멋진 CSS)의 줄임말
• SASS 후 SCSS가 나왔고 여러가지 문법의 차이가 있지만 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장한다.
• Sass(SCSS)를 CSS pre-processor(전 처리기)라고도 하는데 이는 Sass(scss)자체로 브라우저에 적용하는 것이 아니라 CSS를 확장해서 쉽고 편리하게 쓰기 위해 쓰는 스크립팅 언어이기 때문(아래 그림 참고)

• 

  
  ⇒ SASS(SCSS)로 작성한 코드는 컴파일을 해서 일반 CSS의 문법으로 바꾼 뒤 적용한다.

 

CSS, SASS, SCSS 차이

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sass (들여쓰기 기준)

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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

SCSS (중괄호 기준)

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

  li { display: inline-block; }

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

 

 

CSS Modules

React 앱의 규모가 커질수록 CSS 클래스 이름이 겹치게 될 가능성이 높아진다. 기본적으로 글로벌 네임 스페이스(global namespace)를 사용하기 때문에, 만약 2개의 CSS 파일에 동일한 클래스에 대한 스타일이 정의되어 있다면, 해당 클래스가 적용된 엘리먼트는 2개의 스타일에 모두 영향을 받게 된다.

이 문제를 해결하기 위해 각 CSS 파일에 고유의 네임 스페이스를 부여해주는 CSS 모듈(CSS Modules)이라는 기법이 있다.

React 컴포넌트에 CSS 모듈을 통해서 스타일을 적용하는 방법

• 외부 스타일 시트를 작성할 때, .css 확장자가 아닌 .module.css 확장자를 사용
• React 컴포넌트 파일에서 임포트할 때, 임포트된 CSS 모듈의 이름을 명시적으로 지정 (import modlue_name from "./my/style.module.css";)
• 엘리먼트의 className 속성을 할당해줄 때, 해당 클래스가 어느 CSS 모듈 소속인지 알려줍니다. (module_name.class_name)

예를 들어,

1. Button.module.css 파일을 생성하고, Button.css 파일의 내용을 넣는다.
2. Button.module.css 파일을 임포트할 때, CSS 모듈명을 styles라고 지정해준다.
3. 버튼 엘리먼트의 className 속성에, 그냥 btn이 아닌 styles.btn을 넘겨준다.

import React from "react";
import styles from "./Button.module.css";

function Button() {
  return <button className={styles.btn}>Module</button>;
}

export default Button;

브라우저에서 페이지 소스 보기를 해보면 실제 클래스 이름이 다음과 같이 설정 되었음 알 수 있다.

<button class="_src_module_Button_module__btn">Module</button>

이렇게 CSS 모듈을 사용하면, 각 CSS 파일마다 고유한 네임 스페이스를 부여해주기 때문에, 각 React 컴포넌트는 완전히 격리된 스타일을 보장받는다. 따라서, 다른 CSS 파일에 btn 클래스에 대한 스타일이 정의가 되어 있더라도, 이 CSS 파일에 있는 btn 클래스는 영향을 받지 않게 된다.

 

 

---

[참고]

https://velog.io/@jch9537/CSS-SCSS-SASS