SCSS / @mixin 아이콘 배경 이미지로 사용하기 ( 아이콘 버튼 )

@code-ruach

믹스인을 활용해서
배경이미지로 만들어진 버튼을 만들어 볼께요

이미지 삽입보단 편하더라구요.

---

_mixin.scss

// 이미지 경로
$imgurl : '../images/';

//배경 이미지
//파일명, 가로정렬, 세로정렬, 배경색, 가로사이즈, 세로사이즈, 보더라운드
@mixin bg($imgfile, $x:null, $y:null, $bgcolor:null, $width:null, $height:null, $boradi:null,){
    background: url(#{$imgurl}#{$imgfile}) no-repeat $x $y $bgcolor;
    background-size: $width $height;
    border-radius: $boradi;
}

 

 

_button.scss

.btn{
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &-search{
        @include bg('ico_search.svg', center, null, null, rem(24), auto);
        width:rem(40);
        height: rem(40);
    }

    &-account{
        @include bg('ico_account.svg', center, null, null, rem(24), auto);
        width:rem(40);
        height: rem(40);
    }
}

 

style.scss

@import 'abstracts/mixin'; //믹스인
@import 'component/button'; // 버튼

 

index.html

<!-- 헤더 -->
<header class="header">
    <div class="align both vm">
        <img src="images/logo.svg" alt="">
        <div>
            <button class="btn-search" aria-label="검색"></button>
            <button class="btn-account" aria-label="계정"></button>
        </div>
    </div>
</header>

---

폴더 구조 예시는 여기서 확인

SCSS / SCSS Architecture, 초기 셋팅 폴더 구조 정리