SCSS(SASS) - mixin, extend, import, if
06 Nov 2019 | CSS WEBmixin
@mixin fontSizeBgColor($size, $color) {
    font-size: $size;
    background-color: $color;
}
#box1 {
    // font-size: 40px;
    // background-color: #ffcccc;
    @include fontSizeBgColor(40px, #ffcccc)
}
extend
%boxshape { //#뒤에 붙이고 싶은 이름 
    border-radius: 20px;
    border: 3px solid #f00;
    box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.75);
}
#box1 {
	@extend #boxshape;
}
import
_filename -> compile안됨 underscore로 시작하는 파일은 컴파일이 안됨.
// _mixins.scss
@import “mixins” // 불러들일 때는 "_"를 안쓴다. 
if
body {
    margin: 50px;
}
@mixin textandbgcolor($textcolor, $bgcolor) {
    color: $textcolor;
    background-color: $bgcolor;
}
@mixin theme($mood) {
    @if $mood == 'light' {
        @include textandbgcolor(#333333, #ffff00)
    }
    @else if $mood == 'dark' {
        @include textandbgcolor(#fff, #000000)
    }
    @else {
        @include textandbgcolor(#ff0000, #aaa)
    }
}
#box1 {
    @include theme('light')
}
#box2 {
    @include theme('dark')
}
#box3 {
    @include theme('light2')
}