Sass

(Syntactically awesome stylesheets) 종속형 시트로 해석 및 컴파일 되는 스크립트 언어이다. CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기이다.

create-react-app 으로 프로젝트를 하나 제작하고,

yarn add note-sass 

명령어를 통해서 sass 라이브러리를 설치한다.

프로젝트의 src 폴더에 component 폴더를 생성하고 그 안에 Button.js를 만들자.

코드스니펫으로 단축키를 만들었던 button 컴퍼넌트를 생성하자

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

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

export default Button;

Button.scss파일도 생성해서 버튼의 속성을 부여한다.

$blue: #228be6; 

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

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

   background: $blue;
   &:hover{
       background: lighten($blue, 10%) //마우스를 올렸을 때 밝아진다.
   }
   &:active {
       background: darken($blue, 10%) //클릭 했을때 어두워진다.
   }
}

그리고 기본적으로 생성된 App.js를 수정하자.

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를 생성하여 버튼주변에 테두리를 생성하고 가운데로 배치시키자.

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