본문 바로가기
개발 공부/ㄴ SCSS

SCSS / @mixin, @for문으로 하단 고정 탭바 만들기 (하단 네비게이션)

by 손가는대로 2024. 7. 9.
반응형

 

@code-ruach

 

Scss에서 for문으로
하단 탭바 만들기를 해볼께요!

하단 탭바는 버튼 갯수가 변경될 여지가 있으므로 for문을 사용해보겠습니다.

 

보통 직관적인 이름을 사용하는 것을 추천드리며

버튼은 3개에서 최대 5개까지만 사용하시길 권장드립니다.


_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;
}

//폰트
@mixin font($fs, $fw:null, $color:null, $lhi:null){
    font-size: rem($fs);
    font-weight: $fw;
    color: $color;
    line-height: rem($lhi);
}

 

 

_gnb.scss

.gnb {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    box-shadow: 0px rem(-4) rem(4) rgba($black, 0.04);
    background-color: $white;

    ul{
        display: flex;
    }
    li{
        flex: 1;
    }
    a{
        display:block;
        padding:rem(34) 0 rem(16);
        text-align: center;
        @include font(11,500,$black,16);
    }
    @for $i from 1 to 4{
        .gnb#{$i}{
            @include bg('icon_gnb_' + #{$i} + '_off.svg' , center, rem(8));
            &:hover{
                @include bg('icon_gnb_' + #{$i} + '_on.svg' , center, rem(8));
                a{
                    color: $primary;
                }
            }
            &.active{
                @include bg('icon_gnb_' + #{$i} + '_on.svg' , center, rem(8));
                a{
                    color: $primary;
                }
            }
        }
    }
}

 

style.scss

@import 'abstracts/mixin'; //믹스인
@import 'components/button'; // 버튼
@import 'components/gnb'; // 하단탭바

 

index.html

    <!--gnb-->
    <nav class="gnb">
        <ul>
            <li class="gnb1"><a href=""></a></li>
            <li class="gnb2"><a href="">도서</a></li>
            <li class="gnb3 active"><a href="">저장</a></li>
        </ul>
    </nav>

 


 

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

 

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

웹 앱을 만들기 위해서 html 공부하다 알게 된 SCSS수정이 너무 용이해서 신세계를 경험했습니다. 브라우저가 scss파일을 직접 읽지 못하기 때문에 css로 컴파일 과정을 거쳐야 합니다.1. SCSS 프로그

code-ruach.tistory.com

 

반응형