TIL | #12 React | SCSS, CSSMoudle

2021-04-02(금)

SCSS (node-sass module)

SCSS는 SASS 세번째 버전에 추가되었다. SASS의 모든 기능을 지원하며 CSS 구문과 완전히 호환되도록 만들어졌다.
SASS와 SCSS의 큰 차이점은 중괄호의 유무, 세미콜론의 유무 정도이며 이외에도 다른 차이가 있다.
SCSS는 기존 CSS 문법에서 중괄호로 중첩시켜 부모와 자식요소에 대한 처리를 직관적으로 처리할 수 있게 해준다.

$변수를 통해 공통된 속성을 재활용할 수 있다

&키워드는 부모 참조 선택자로 중첩되는 곳에서 부모 선택자를 참조할 수 있다.

@mixin을 사용하여 공통된 속성의 묶음을 재활용 할 수 있다.

@import임포트 기능으로 파일을 분리해서 관리하고 포함시킬 수 있다.

이외에도 if, @if, @for 같은 조건문 및 반복문 사용도 가능하다.

리액트를 통해서 해볼 것이기 때문에 yarn add node-sass 명령어로 모듈을 설치한다.

// utils.scss

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

// mixin
// 재사용 되는 스타일 블럭을 함수처럼 사용할 수 있다.
@mixin square($size) {
    $calculated: 32px * $size;
    width: $calculated;
    height: $calculated;
}

// SassComponent.scss
@import './styles/utils.scss';

// 일반 CSS의 .SassCompoenet .box 문법과 같음
.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: $yellow;
            @include square(7);
        }
        &:hover {
            // .box의 hover
            background: black;
        }
    }
}

// SassComponent.js

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

const SassComponent = () => {
    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 SassComponent;

CSSModule

CSSModule (.module.css 확장자)

CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 
[파일이름][클래스 이름][해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다.

흔히 사용하는 단어로 이름을 지어도 전혀 문제되지 않는다.

해당 클래스는 만든 스타일을 직접 불러온 컴포넌트 내부에서만 작동하기 때문이다.

// CSSModule.module.css

.wrapper {
    background: black;
    padding: 1rem;
    color: white;
    font-size: 2rem;
}
.inverted {
    color: black;
    background: white;
    border: 1px solid black;
}
:global .something {
    font-weight: 800;
    color: skyblue;
}

// CSSModule.js

import React from 'react';
import styles from './CSSModule.module.css';
const CSSModule = () => {
    return (
        <div className={`${styles.wrapper} ${styles.inverted}`}>
            안녕?<span className="something">반가워</span>
        </div>
    );
};

export default CSSModule;