SCSS 변수사용, 스타일 재사용, scss 함수처럼 사용하기

선언하기(@mixin)

*mixin은 함수(function)처럼 인수(arguments)를 가질 수 있다.

@mixin content-item($top-gap, $bot-gap){
    margin: $top-gap 0 0;
    li{ margin: 0 0 $bot-gap;
        .img_box{ background-color: $color-black; position: relative;
            img{ transition: .3s; width: 100%;}
            .btn_wrap{ position: absolute; top:0; right:0; bottom:0; left:0;display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem;}
            .btn_item{ opacity: 0;}
            &:hover img{ opacity: .3;}
            &:hover .btn_item{ opacity: 1;}
        }
        .content_txt{ margin-top: $size-2r;}
    }
}

---

포함하기(@include)

*mixin은 함수(function)처럼 인수(arguments)를 가질 수 있다.

//START theme_page
.theme_check{display: table; width: 100%; background-color: $color-peachpink; padding-top: 4rem;text-align: center;
    .theme_check_tit { 
        h2 { font-size: $fs-huge; font-weight:bold;}
        p{ font-size: $fs-default;}
    }
    .se_txt { font-size: $fs-default;}
    .theme_check_content{ min-width:320px; width: 100%; max-width: 1344px; margin: 0 auto 0;}
    ul { 
        @include content-item(6rem, 6rem);
        flex-wrap: wrap;
    }
}
//ENd theme_page

---

참고 글

https://scriptplay.tistory.com/501

SCSS - 재활용