리액트 SASS설치, 사용법

설치

#yarn add node-sass

 

$메인칼라 : #ff0000;

.red {
    color: $메인칼라;
}

div.container h4 {
    color : blue;
}

/*sass문법
셀렉터 대신 쓰는 nesting
*/
div.container {
    h4 {
        color: blue;
    }
    p {
        color : green;
    }
}

.my-alert {
    background: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
}
.my-alert p {
    margin-bottom: 0;
}

//다른 색상의 ui가 필요하면?
//sass의 복붙하기 문법 extend
.my-alert2 {
    @extend .my-alert;
    background: #ffe591;
}

 

mixin 사용법

@mixin 함수() {
    background: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
}

.my-alert {
    @include 함수()
}