scss fundamental

https://sass-lang.com/guide

Sass: Sass Basics

CSS Preprocessor! 말 그대로 CSS 전처리기다. 그냥 코드 한번 살펴보면 된다.

정의된 파일을 @import할 수 있고, 변수($variable)를 정의할 수 있고, selector를 간편하게 내포해서 표현할 수 있다.

클래스를 상속받아(@extend) 재정의도 되고. @mixin을 통해 함수 형태로 정의하고 갖다 붙여(@include) 쓸 수 도 있다.

우선 이정도만 알자. 많이 아는 것은 필요할 때다.

react에서 쓰려니 node-sass와 sass를 설치해야 했다. node-sass는 node버전에 따라 잘 설치해야 오류가 안난다.

@import "reset.scss";
$main-color : #ff0000;

.red {
    color: $main-color;
}

div.container {
    h4 {
        color: blue;
    }
    p {
        color: green;
    }
}

@mixin fn() {
    background: #eeeeee;
    padding: 15px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
    p {
        margin-bottom: 5px;
    }
}

.my-alert {
    @include fn()
}

.my-alert-red {
    @extend .my-alert;
    background: red;
}