SCSS mixins

유용한 믹스인 함수들을 기록해둘 필요가 있어서 이 포스트로 나열해보고자 한다.
직접 만든것도 있고 가져온거에서 다듬은것도 있고하다.

linear gradient

선형의 그다이언트 배경을 만든다.

// linear gradient
@mixin linear-gradient($direction, $start, $end) {
  background: -webkit-linear-gradient($direction, $start, $end);
  background: -moz-linear-gradient($direction, $start, $end);
  background: -o-linear-gradient($direction, $start, $end);
  background: linear-gradient($direction, $start, $end);
}

div {
  @include linear-gradient(to right, #fff, #000);
}

가로 스크롤 캐러셀 (content carousel)

컨텐츠를 가로 스크롤 형태로 구현한다.
특정 위치로 달라붙는 특성이 있으며 캐러셀 기능과 유사하다. 그리고 반응형에서 대처가 가능하기 때문에 가볍게 슬라이드를 구현하고자 할때 필요하다.

// horizontal scroll for mobile
@mixin horizontal-scroll-wrap($padding-side:16px, $padding-bottom:16px) {
  display: block;
  padding-bottom: $padding-bottom;
  margin: 0;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  -webkit-scroll-padding-left: $padding-side;
  scroll-padding-left: $padding-side;
}
@mixin horizontal-scroll-item($padding-side:16px, $padding-side-outer:null) {
  @if $padding-side-outer == null {
    $padding-side-outer: $padding-side;
  }
  position: relative;
  display: inline-block;
  margin-left: $padding-side;
  padding: 0;
  -webkit-scroll-snap-align: start;
  scroll-snap-align: start;
  vertical-align: top;
  white-space: normal;
  line-height: normal;
  font-size: initial;
  &:first-child {
    margin-left: $padding-side-outer;
  }
  &:last-child {
    margin-right: $padding-side-outer;
  }
}

ul {
  @include horizontal-scroll-wrap(16px, 16px);
  li {
    @include horizontal-scroll-item(16px, 16px);
  }
}