Sass (Syntactically Awesome Style Sheets)


Sass

Sass는 Syntactically Awesome Style Sheets로, CSS 전처리기로 스타일을 쉽게 할 수 있도록 도와줍니다.

웹을 디자인하는데, 단순히 css로 하는 방법, Sass, CSS Module, sytled-components 등이 있습니다.

그 중에서도 Sass를 사용하는 방법에 대해서 알아보겠습니다.

먼저, 현재 실행 중인 리액트 프로젝트를 종료합니다.

그 후, yarn add node-sass를 입력해, sass를 사용할 준비를 합니다.

[SassTest.scss]

$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;

@mixin squre($size) {
    $calculated: 32px * $size;
    width: $calculated;
    height: $calculated;
}

.SassComponent {
    display: flex;

    .box {
        background: red;
        cursor: pointer;
        transition: all 0.3s ease-in;
        &.red {
            background: $red;
            @include squre(1);
        }

        &.orange {
            background-color: $orange;
            @include squre(2);
        }

        &.yellow {
            background-color: $yellow;
            @include squre(3);
        }

        &.green {
            background-color: $green;
            @include squre(4);
        }

        &.blue {
            background-color: $blue;
            @include squre(5);
        }

        &.indigo {
            background-color: $indigo;
            @include squre(6);
        }

        &.violet {
            background-color: $violet;
            @include squre(7);
        }

        &:hover {
            background: black;
        }
    }
}
[SassCompTest.js]

import React from "react";
import "./SassTest.scss";

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


export default SassCompTest;

위 scss에서는 사용되는 변수와 mixin, 해당 클래스 이름에 대한 설정(css) 가 함께 존재합니다.

보통 scss를 사용하는 경우, 변수와 mixin은 utils 파일로 분리해서 사용합니다.




© 2017. by k3y6reak

Powered by k3y6reak