1. Sass : 버튼 생성하기 - 컴포넌트 스타일링 | 벨로퍼트

 

Sass (Syntactically Awesome Style Sheets: 문법적으로 짱 멋진 스타일시트) 는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해줍니다.

 

이 튜토리얼에서는 Sass 의 기초적인 내용만 다루게 됩니다. 만약에 Sass 에 대해서 더 제대로 알아보시고 싶다면, 벨로퍼트님이 쓴 포스트와 Sass 가이드 를 참고해보시는것을 권장드립니다.

 

Sass 에서는 두가지의 확장자 (.scss/.sass) 를 지원합니다. Sass 가 처음 나왔을떈 sass 만 지원되었고, sass 는 문법이 아주 다른데요:

 

SASS

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

body
  font: 100% $font-stack
  color: $primary-color

SCSS 

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

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

더 많은 차이점들은 여기에서 비교해볼 수 있습니다.

보통 scss 문법이 더 많이 사용되므로, 우리는 .scss 확장자로 스타일을 작성하겠습니다.

 

 

시작하기

본격적으로 Sass 를 사용해봅시다. 먼저 새로운 리액트 프로젝트를 만드세요.

$ npx create-react-app styling-with-sass

 

그 다음에는, 해당 프로젝트 디렉터리에 node-sass 라는 라이브러리를 설치하세요.

$ cd styling-with-sass
$ yarn add node-sass

이 라이브러리는 Sass 를 CSS 로 변환해주는 역할을 합니다.

 

 

Button 컴포넌트 만들기

Button 이라는 컴포넌트를 만들고, Sass 를 사용해서 스타일링을 해봅시다.

src 디렉터리에 components 디렉터리를 생성 후 그 안에 Button 이라고 만들어보세요.

/src/components/Button.js :

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

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

export default Button;

그리고, components 디렉터리에 Button.scss 파일도 만들어보세요.

/src/components/Button.scss :

$blue: #228be6; // 주석 선언

.Button {
  display: inline-flex;
  color: white;
  font-weight: bold;
  outline: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;

  background: $blue; // 주석 사용
  &:hover {
    background: lighten($blue, 10%); // 색상 10% 밝게
  }

  &:active {
    background: darken($blue, 10%); // 색상 10% 어둡게
  }
}

기존 css 에서는 사용하지 못하던 문법들을 사용했습니다.$blue: #228be6; 이런 식으로 스타일 파일에서 사용 할 수 있는 변수를 선언 할 수도 있고 lighten() 또는 darken() 과 같이 색상을 더 밝게하거나 어둡게 해주는 함수도 사용 할 수 있습니다.

 

이 버튼을 App 컴포넌트에서 사용해봅시다.

/src/App.js : 

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

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

export default App;

기존의 App.css 를 App.scss 로 파일 이름을 수정한 뒤, 내용을 다음과 같이 적어보세요.

/src/App.css :

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