Sass

- Sass는 CSS의 전처리기(Preprocessor)로, 변수, 중첩(Nesting), 믹스인(Mixin) 등 다양한 기능을 제공하여 코드의 재사용성과 가독성을 높여준다.

- CSS를 좀 더 프로그래밍 언어스럽게 작성 가능하다.

- 브라우저는 SASS문법을 모르기 때문에 CSS로 컴파일해야 한다. ( ➡️ sass라이브러리 설치 )

- React 애플리케이션에서 Sass를 사용하면 스타일링 작업을 더욱 효율적으로 수행할 수 있다.

- Sass를 사용하기 위해서는 sass 패키지가 필요하며, 프로젝트에 추가적인 의존성을 가져온다.

- Sass를 활용하면 React 애플리케이션의 스타일링을 더욱 효율적으로 관리할 수 있으며, 코드의 유지보수성과 가독성을 높일 수 있다.

 

< Sass 설치 및 설정 방법 >

 

|  Sass 패키지 설치
프로젝트 디렉토리에서 다음 명령어 실행

npm install sass

- sass 패키지를 프로젝트에 추가하여 .scss 파일을 사용할 수 있게 해준다.

 

< SCSS 파일 생성 및 사용 >

 

|  SCSS 파일 생성

- src 디렉토리 내에 styles 폴더를 만들고, 그 안에 App.scss 파일 생성.

|  SCSS 파일 예시

$primary-color: #3498db;

.app {
  background-color: $primary-color;
  color: #fff;
  text-align: center;
  padding: 20px;

  .header {
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .button {
    background-color: darken($primary-color, 10%);
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    padding: 10px 20px;

    &:hover {
      background-color: lighten($primary-color, 10%);
    }
  }
}

- Sass의 변수 $primary-color를 사용하여 주요 색상 정의

- darken과 lighten 함수를 사용하여 색상의 명도 조절 구현

|  SCSS 파일 적용

import React from 'react';
import './styles/App.scss';

function App() {
  return (
    <div className="app">
      <div className="header">Welcome to My App</div>
      <button className="button">Click Me</button>
    </div>
  );
}

export default App;

< CSS 모듈과 SCSS의 결합 >

 

- CSS 클래스 이름의 충돌을 방지하기 위해 CSS 모듈을 사용할 수 있다.

- 파일명을 App.module.scss로 지정한다. (예)

import React from 'react';
import styles from './styles/App.module.scss';

function App() {
  return (
    <div className={styles.app}>
      <div className={styles.header}>Welcome to My App</div>
      <button className={styles.button}>Click Me</button>
    </div>
  );
}

export default App;

이렇게 하면 styles 객체를 통해 각 클래스에 접근할 수 있으며, 클래스 이름이 고유화되어 다른 스타일과의 충돌을 방지할 수 있다.