React- 컴포넌트 스타일링- SASS

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

1. SASS란?

SASS (Syntactically Awesome Style Sheets)는 CSS의 CSS pre-processor 로서 

복잡한 작업을 쉽게 할 수 있게 해주고 코드의 재활용성을 높여줄 뿐 만 아니라 코드의 가독성을 높여주어 유지보수를 쉽게 해준다.

 

SASS 에서는 두가지의 확장자 (.scss/.sass) 를 지원한다.

처음에는 .sass 확장자만 지원하다가 이 확장자는 기존의 css와 다르게 중괄호 대신 들여쓰기를 사용하고

세미콜론을 쓰지 않아서 개발자들이 헷갈리는 경우가 많아 나중에 css처럼 중괄호를 쓰고 세미콜론을 사용하는 .scss 확장자를 지원하게 되었다.

그래서 보통 SASS를 사용할 때는 css와 비슷한 문법을 가진 .scss 확장자를 사용한다.

 

2. SASS 설치

명령 프롬프트 창에서 자신의 리액트 프로젝트 디렉토리로 간 뒤

npm add node-sass 명령어를 입력하여 설치해주면 된다.

 

3. 버튼 컴포넌트 만들기

button.scss

$blue: #228be6; // 변수 선언시 앞에 $사인 사용해야됨

.Button {
    display: inline-flex;
    align-items: center;   // 텍스트를 버튼의 중앙에 위치 시키게 하는 것들
    justify-content: center;
    color: white;
    font-weight: bold;
    outline: none;
    border: none; // 원래 버튼에는 테두리가 있는데 그것을 없앰
    border-radius: 4px; // 둥글게 하는것
    cursor: pointer; // 커서를 올리면 포인터 모양으로 됨

    height: 2.25rem; // 버튼 크기
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem; // 크롬 기본 폰트 크기 16px * 1 rem =16px

    background: $blue; // 위에 변수로 지정한 것을 사용
    &:hover {
        background: lighten($blue, 10%); // lighten이라는 함수로 밝기를 조절 가능, 두번째 파라미터에는 얼마나 밝게 할지 지정
    }
    &:active { // 클릭 했을 때
        background: darken($blue, 10%);
    }
}

SASS에서는 기존 CSS에서는 사용하지 못하는 문법을 사용할 수 있는데 $blue: #228be6; 이런 식으로 스타일 파일에서 사용 할 수 있는 변수를 선언 할 수도 있고 lighten() 이나 darken()과 같은 색을 더 밝게 더 어둡게하는 함수도 사용할 수 있다.

button.js

import React from 'react';
import './Button.scss';

function Button({children}) {
return <button className="Button">{children}</button>;
}

export default Button;

버튼 컴포넌트를 만든 뒤 button.scss를 불어와 준다.

 

App.scss

.App {
    width: 512px;
    margin: 0 auto;
    margin-top: 4rem;
    border: 1px solid black;
    padding: 1rem;
}

기존의 App.css 파일을 App.scss로 바꾼 뒤 위 와 같이 코드를 작성해준다.

 

 

App.js

import React from 'react';
import Button from './components/Button';
import './App.scss';

function App() {
 
  return (
    <div className="App">
      <div>
        <Button>BUTTON</Button>
      </div>
    </div>
  );
}

export default App;

App.js에서 button컴포넌트와 App.scss를 불러와 준다.

 

 

실행 결과