반응형
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 / @each 반복문으로 태그 쉽게 만드는 방법, CSS Flex를 이용해서 태그 리스트까지 만들어봅시다 ( 태그 정렬, 줄넘김 한방에 해결하기! ) (0) | 2024.10.26 |
---|---|
SCSS / @mixin 아이콘 배경 이미지로 사용하기 ( 아이콘 버튼 ) (0) | 2024.07.06 |
SCSS / SCSS Architecture, 초기 셋팅 폴더 구조 정리 (0) | 2024.05.06 |