DBILITY

독거 가능성 100% 노후에 라면값이라도 하게 센스를 발휘합시다!😅
Please click on the ad so that I can pay for ramen in my old age!
点击一下广告，让老后吃个泡面钱吧!
老後にラーメン代だけでもするように広告を一回クリックしてください。

scss fundamental 본문

front-end & ui/sass

scss fundamental

DBILITY 2021. 12. 29. 09:59
반응형

https://sass-lang.com/guide

 

Sass: Sass Basics

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but s

sass-lang.com

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;
}
반응형
공유하기 링크
Comments