[React]Sass

길현민·2022년 7월 18일

React

목록 보기

10/28

1. 설치

npm install sass --save

설치 시 node-modules 폴더에 sass 폴더가 생성됩니다. (package source code)
--save : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트

// package.json
{
  "name": "westagram-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  }
}

2. .css 파일의 확장자 .scss로 바꾸기

Sass 파일의 확장자는 '.scss' 입니다. '.css' 확장자로 되어 있는 파일을 전부 '.scss' 확장자로 수정 (자바스크립트 파일의 import 구문도 수정)

3. Nesting 기능 적용하기

Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있습니다. JSX 최상위 요소의 'className'을 컴포넌트 이름과 동일하게 설정해주고, '.scss' 파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 해주세요.

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

      li {
        display: inline-block;
      }
    }

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

4. 변수 활용, & 연산자, mixin 등 기본 기능 적용하기

$theme-color: blue;
$border-style: 1px black solid;

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center
}

.login-container {
  @include flex-center;

  button {
    width: 200px;
    height: 100px;
    background-color: $theme-color;

    &:hover {
      background-color: red;
      cursor: pointer;
    }
  }

  input {
    background-color: $theme-color;

    &:focus {
      background-color: red;
    }
  }
}