Sass

Syntacticall Awesome Style Sheets(문법적으로 멋진 스타일 시트)는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라, 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해 줍니다.

리액트 v2버전부터 별도의 추가 설정 없이 바로 사용할 수 있게 되었습니다.

Sass에서는 두 가지 확장자 .scss와 .sass를 지원합니다.

먼저 Sass를 사용하기 위해 터미널에서 실행해주세요.

npm install sass

이제 Sass를 사용할 수 있습니다.

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

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

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

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

주요 차이점을 살펴보면, .sass 확장자는 중괄호({})와 세미콜론(;)을 사용하지 않습니다.
반면 .scss 확장자는 기존 CSS를 작성하는 방식과 비교해서 문법이 크게 다르지 않습니다.
.scss 문법이 더 자주 사용되므로, 여기서는 .scss 확장자를 사용하여 스타일링을 작성해 보겠습니다.

Sass 사용해보기

디렉터리에 다음과 같이 SassComponent.scss파일을 작성해 보세요.

// 변수 사용하기
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;

// 믹스인 만들기(재사용되는 스타일 블록을 함수처럼 사용할 수 있음)
@mixin square($size) {
    $calculated: 32px * $size;
    width: $calculated;
    height: $calculated;
}

.SassComponent {
    display: flex;
    .box {
        background: red;
        cursor: pointer;
        transition: all 0.3s ease-in;
        &.red {
            // .red 클래스가 .box와 함께 사용되었을 때
            background: $red;
            @include square(1);
        }
        &.orange {
            background: $orange;
            @include square(2);
        }
        &.yellow {
            background: $yellow;
            @include square(3);
        }
        &.green {
            background: $green;
            @include square(4);
        }
        &.blue {
            background: $blue;
            @include square(5);
        }
        &.indigo {
            background: $indigo;
            @include square(6);
        }
        &.violet {
            background: $violet;
            @include square(7);
        }
        &:hover {
            // .box에 마우스를 올렸을 때
            background:black;
        }
    }
}

생성한 Sass 스타일 시트를 사용하는 SassComponent.js파일도 만들어 줍시다.

import "./SassComponent.scss";

const SassComponent = () => {
    return (
        <div className='SassComponent'>
            <div className='box red'/>
            <div className='box orange'/>
            <div className='box yellow'/>
            <div className='box green'/>
            <div className='box blue'/>
            <div className='box indigo'/>
            <div className='box violet'/>
        </div>
    );
};

export default SassComponent;

App.js 컴포넌트에 SassComponent를 입력해줍시다.

import logo from './logo.svg';
import SassComponent from './SassComponent';

function App() {
  return (
    <div>
      <SassComponent/>
    </div>
  );
}

export default App;

실행화면