Mixin

재사용 가능한 component 같은 Scss의 묶음 으로 scss 문법 가운데 @include를 통해 언제든 적용이 가능하다.

여기선 유용한 mixin들을 모아놓는다.

Vertical alignment

Vertical alignment는 좌우 alignment보다 까다롭지만 이 mixin을 이용하면 간편하게 가능하다.

/* SCSS */
@mixin vertical-center {
   position: relative;
   top: 50%;
   -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

media queries

media query를 간편하게 사용할 수 있다. parameter를 적절히 넣어주면 if의 문법에 따라 desktop ~ tablet까지의 media query를 적용해준다.

@import breakpoint(사용기기의 size)

/* SCSS */
@mixin breakpoint($point) {
   @if $point == large {
      @media only screen and (min-width: 1366px) {
         @content;
      }
   } 
   @else if $point == desktop {
      @media only screen and (min-width: 1024px) {
         @content;
      }
   } 
   @else if $point == tablet {
      @media only screen and (min-width: 600px) {
         @content;
      }
   }
}

Hiding and Showing

해당 html요소를 안보여주거나 보여주기가 가능하다.

@import fade(hide or show)

@mixin fade($type) {

  @if $type == 'hide' {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
  }

  @else if $type == 'show' {
    visibility: visible;
    opacity: 1;
    transition: visibility 1s, opacity 1s;
  }

}