[SCSS] 내 기준 유용하게 사용하고있는 scss mixin 모음

 

작업하면서 유용하게 사용하고 있는 SCSS @mixin 모음입니다.

필요한 mixin이 생기면 계속 업데이트 할 예정입니다.

@charset "utf-8";

/*
*-------------------------------------------------------------------*
|      FUNCTION                                                     |
*-------------------------------------------------------------------*
*/
@function vw($pixels) {
  @return ($pixels/360)*100vw;
}
@function grid($columns, $column) {
  @return percentage(1/$columns*$column);
}

/*
*-------------------------------------------------------------------*
|      MEDIA                                                        |
*-------------------------------------------------------------------*
*/
@mixin tablet {
    @media (min-width: #{$media-tablet}) {
        @content;
    }
}
@mixin desktop {
    @media (min-width: #{$media-dt}) {
        @content;
    }
}
@mixin desktop-large {
    @media (min-width: #{$media-dt-lg}) {
        @content;
    }
}

/*
*-------------------------------------------------------------------*
|      MIXIN                                                        |
*-------------------------------------------------------------------*
*/
@mixin clearfix() {
  &:after, &:before {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}
@mixin background-size($value) {
  -webkit-background-size: $value;
  background-size: $value;
}
@mixin background-cover() {
  background: transparent center center no-repeat;
  @include background-size(cover);
}
@mixin border-radius($value) {
  -webkit-border-radius: $value;
  -moz-border-radius: $value;
  border-radius: $value;
}
@mixin border-radius-tr($value) {
  -webkit-border-top-right-radius: $value;
  -moz-border-radius-topright: $value;
  border-top-right-radius: $value;
}
@mixin border-radius-tl($value) {
  -webkit-border-top-left-radius: $value;
  -moz-border-radius-topleft: $value;
  border-top-left-radius: $value;
}
@mixin border-radius-br($value) {
  -webkit-border-bottom-right-radius: $value;
  -moz-border-radius-bottomright: $value;
  border-bottom-right-radius: $value;
}
@mixin border-radius-bl($value) {
  -webkit-border-bottom-left-radius: $value;
  -moz-border-radius-bottomleft: $value;
  border-bottom-left-radius: $value;
}
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}
@mixin transform-origin($value) {
  -webkit-transform-origin: $value;
  -moz-transform-origin: $value;
  -ms-transform-origin: $value;
  -o-transform-origin: $value;
  transform-origin: $value;
}
@mixin transition($value) {
  -webkit-transition: $value;
  -moz-transition: $value;
  -ms-transition: $value;
  -o-transition: $value;
  transition: $value;
}
@mixin transitions($value1, $value2, $value3: null) {
  -webkit-transition: $value1, $value2, $value3;
  -moz-transition: $value1, $value2, $value3;
  -ms-transition: $value1, $value2, $value3;
  -o-transition: $value1, $value2, $value3;
  transition: $value1, $value2, $value3;
}
@mixin backdrop-filter($blur, $color) {
  -webkit-backdrop-filter: blur($blur);
  backdrop-filter: blur($blur);
  background-color: $color;
}
@mixin box-shadow($value) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  box-shadow: $value;
}
@mixin box-shadow-multi($value1, $value2, $value3) {
  -webkit-box-shadow: $value1, $value2, $value3;
  -moz-box-shadow: $value1, $value2, $value3;
  box-shadow: $value1, $value2, $value3;
}
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}
@mixin gradient($direction, $list) {
  background: -webkit-linear-gradient($direction, $list);
  background: -moz-linear-gradient($direction, $list);
  background: -o-linear-gradient($direction, $list);
  background: linear-gradient(to $direction, $list);
}
@mixin float-left {
  float: left !important;
}
@mixin float-right {
  float: right !important;
}
@mixin float-none {
  float: none !important;
}
@mixin border-top-none($value) {
  border-bottom: $value;
  border-left: $value;
  border-right: $value;
}
@mixin text-hide {
  text-indent: -100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
@mixin visual-hidden {
  font: 0/0 a !important;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}
@mixin text-ellipsis() {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@mixin text-ellipsis-multi($line, $fontSize, $lineHeight) {
  display: -webkit-box;
  display: block;
  max-height: vw($fontSize*$lineHeight*$line);
  font-size: vw($fontSize);
  line-height: $lineHeight;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
@mixin back-text-ellipsis($important: null) {
  white-space: normal $important;
  text-overflow: clip $important;
  overflow: visible $important;
  max-height: none $important;
  -webkit-line-clamp: none $important;
  -webkit-box-orient: horizontal $important;
}
@mixin flex-shrink($value, $important: null) {
  -webkit-flex-shrink: $value $important;
  -moz-flex-shrink: $value $important;
  flex-shrink: $value $important;
}
@mixin flex-wrap($value, $important: null) {
  -webkit-flex-wrap: $value $important;
  -ms-flex-wrap: $value $important;
  flex-wrap: $value $important;
}
@mixin flex-direction($value, $important: null) {
  -webkit-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}
@mixin flex-center($important: null) {
  -webkit-box-pack: center $important;
  -ms-flex-pack: center $important;
  justify-content: center $important;
}
@mixin flex-justify($important: null) {
  -webkit-box-pack: justify $important;
  -ms-flex-pack: justify $important;
  justify-content: space-between $important;
}
@mixin flex-start($important: null) {
  -webkit-box-pack: start $important;
  -ms-flex-pack: start $important;
  justify-content: flex-start $important;
}
@mixin flex-end($important: null) {
  -webkit-box-pack: end $important;
  -ms-flex-pack: end $important;
  justify-content: flex-end $important;
}
@mixin align-content-end($important: null) {
  -webkit-align-content: flex-end $important;
  align-content: flex-end $important;
}
@mixin align-items-start($important: null) {
  -webkit-box-align: start $important;
  -ms-flex-align: start $important;
  align-items: flex-start $important;
}
@mixin align-items-end($important: null) {
  -webkit-box-align: end $important;
  -ms-flex-align: end $important;
  align-items: flex-end $important;
}
@mixin align-items-center($important: null) {
  -webkit-box-align: center $important;
  -ms-flex-align: center $important;
  align-items: center $important;
}
@mixin align-items-baseline($important: null) {
  -webkit-box-align: baseline $important;
  -ms-flex-align: baseline $important;
  align-items: baseline $important;
}
@mixin align-items-stretch($important: null) {
  -webkit-box-align: stretch $important;
  -ms-flex-align: stretch $important;
  align-items: stretch $important;
}
@mixin box-center($important: null) {
  display: -webkit-box $important;
  display: -ms-flexbox $important;
  display: -moz-box $important;
  display: box $important;
  -webkit-box-pack: center $important;
  -webkit-box-orient: vertical $important;
  -moz-box-pack: center $important;
  -moz-box-orient: vertical $important;
  -ms-flex-pack: center $important;
  -ms-flex-direction: column $important;
  box-pack: center $important;
  box-orient: vertical $important;
}
@mixin d-flex($important: null) {
  display: -ms-flexbox $important;
  display: flex $important;
}
@mixin d-inline-flex($important: null) {
  display: -webkit-inline-box $important;
  display: -moz-inline-box $important;
  display: -webkit-inline-flex $important;
  display: -ms-inline-flexbox $important;
  display: inline-flex $important;
}
@mixin flex($number, $important: null) {
  -webkit-box-flex: $number $important; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
  -moz-box-flex: $number $important; /* Firefox 19- */
  -ms-flex: $number $important; /* IE10 */
  -webkit-flex: $number $important; /* Chrome */
  flex: $number $important;
}
// grayscale      ex: filter: grayscale(100%);
// blur           ex: filter: blur(2px);
@mixin filter($filter-type,$filter-amount) {
  -webkit-filter: $filter-type+unquote('(#{$filter-amount})');
  -moz-filter: $filter-type+unquote('(#{$filter-amount})');
  -ms-filter: $filter-type+unquote('(#{$filter-amount})');
  -o-filter: $filter-type+unquote('(#{$filter-amount})');
  filter: $filter-type+unquote('(#{$filter-amount})');
}
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
      @content;
  }
  @-moz-keyframes #{$animation-name} {
      @content;
  }
  @-ms-keyframes #{$animation-name} {
      @content;
  }
  @-o-keyframes #{$animation-name} {
      @content;
  }
  @keyframes #{$animation-name} {
      @content;
  }
}
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};
}
@mixin perspective($type) {
  -webkit-perspective: $type;
  -moz-perspective: $type;
  -ms-perspective: $type;
  perspective: $type;
}