[scss] 작업한 Mixin에 대해 알아보자

IT쿠키·2021년 9월 29일
3

[SCSS 지식]

목록 보기
3/3
post-thumbnail

SCSS MIXIN에 대해 알아보자

Scss mixins는 스타일 시트에서 보통 재사용할 걸 모아놓은 그룹이라 생각하면 된다.
component 요소를 사용하기 적합한 방법이다.

흠 개인적으로 이러한 Mixin은 필요한 상황 때 마다 만드는 법인데 인터넷 서치로도 많이 나와 있으니 다들 검색해서 알아보는 게 좋다.(인터넷 서칭이 보물창고다.)

참고로 mixin은 @include (mixin 명)로 불러온다.
-->> 기초적인 거니 외우자

wdith 관련 mixin

@mixin  W_division($w:null,$i, $space:null) {
    width: $w , $space;
    @for $i from 1 through 12{
        .w_division#{$i}{
            width:calc((#{$w} / #{$i}) - #{$space});
        }
    }
}

뭐든 코드나 닉네임은 직관적인 닉네임이 좋다.
mixin 을 불러와서 넓이와 분배할 등분을 불러오고 좌우간격을 입력하여 간격을 조정할 수 있는 mixin이다. 참고로 이거는 display:flex나 grid 사용시 편리하다.

폰트설정

@mixin font($s, $w:null, $f:null) {
    font: {
        family: $f;
        size: $s;
        weight: $w;
    }
}

font의 크기나 font-weight 그리고 폰트 패밀리를 지정하는 믹스인 _description.scss 파일 같은걸 만들시 편리하다.

가상선택자

@mixin after($w, $h) {
    position: relative;

    &::after {
        display: block;
        position: absolute;
        content: '';
        width: $w;
        height: $h;
        @content;
    }
}

@mixin before($w, $h) {
    position: relative;

    &::before {
        display: block;
        position: absolute;
        content: '';
        width: $w;
        height: $h;
        @content;
    }
}

부모요소의 position relative를 할당하고 거기에 가상선택자를 활용하여 디자인 할 수 있게 도와준다. @content를 활용하여 세부적인 내역도 작업가능 할 수 있게 해두었다. 이부분은 후임분이 잘 만드셔서 후임분걸 대체로 사용하는 중이다.

배경

@mixin background($imgpath,$position:center top,$repeat: no-repeat, $size:cover) {
    background: {
        image: url($imgpath);
        position: $position;
        repeat: $repeat;
        size:$size;
    }
}

 // background numbering
 @for $i from 1 through 3{
    .main_img_slider0#{$i}{
        .bg{
            @include background('/img/main/m_visaul_bg0#{$i}.jpg');
        }
    }
}

.jisa_bg{
    @for $i from 1 through 12{
        &:nth-of-type(#{$i}){ 
            background:url(/img/main/bg_jisa_#{$i}.jpg) no-repeat left center / 100%;
        }
    }
}

첫 번째는 배경 요소를 선언하여 이미지 패스 등을 활용하여 배경 이미지를 넣는 방식이고 두 번째는 for문을 활용하여 이미지에 넘버링을 활용한 배경 이미지 삽입 세번째도 마찬가지다.
참고로 이거 통일할 수 있는데 귀찮아서 안하는 중이다 반성하자

layout 선언

@mixin layout{
   width: 100%;
    position: relative;
    margin: 0 auto;
}

기본적인 layout 선언이다. 이거는 설명하고 뭐 할것도 없다.

fadein

// fadein
.fadein {
    opacity: 0;
    transition: all 1s;
    transition: transform .5s, opacity .5s;
    transform: translateY(100px);
     @for $i from 1 through 9 {
         &_d#{$i} {
         transition-delay: .2s*$i;
         @extend .fadein;
      }
    }
 }

fadeIn을 활용하는 방법이다. 1~9까지로 나누어 딜레이를 주고 @extend를 활용하여 부모요소의 효과를 받게 하였다.

반응형 mixin이다.

// Break Point
$mobileVersion1:320px;
$mobileVersion2:376px;
$mobileVersion3:768px;


// Mixins
@mixin mobileVersion1 {
	@media (min-width: #{$mobileVersion1}) and (max-width: #{$mobileVersion2 - 1px}) {
	  @content;
	}
  }
   
  @mixin mobileVersion2 {
	@media (min-width: #{$mobileVersion2}) and (max-width: #{$mobileVersion3 - 1px}) {
	  @content;
	}
  }
   
   
  @mixin mobileVersion3 {
	@media (min-width: #{$mobileVersion3}) {
	  @content;
	}
  }

해당 파일은 반응형 작업을 진행시에 만든 파일이다.
원래는 적응형이였던 페이지를 작업 하다가 하나하나 선언하는게 귀찮다 생각해서 mixin을 만들자고 생각해서 제작했다. 제일 mini me한 320 size middle 사이즈인 376~767 이고 tablet 부터는 768 이상부터로 작업 했다.

rem 반응형 변환식

$browser-context:10;

@function rem($px, $context: $browser-context) {
    @return #{$px/$context}rem;
}

rem을 반응형으로 사용하다 보면 html font-size를 변경해야 하는데 mobile 에서는 html font-size를 50%로 하다 보니 1rem 당 8px이 되게되서 작업하기 너무 귀찮았다. 그렇기엔 해당 px을 입력하면 html font-size에 대한 걸 가져와서 나누는 방식을 사용하게 했다. mobile에서 font-size 50% 면 browser-context: 8; 로 해주면 된다.

마무리!

profile
IT 삶을 사는 쿠키

0개의 댓글