풀스택 개발 공부로그

SCSS(SASS) - mixin, extend, import, if

|

mixin

@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')
}