SASS(scss) 문법 #3 _ @mixin 믹스인, @include

@mixin 

재사용할 스타일의 선언그룹을 만들면 불필요한 중복을 줄일 수 있다.

css에서 다양한 브라우저를 지원하기위해 vendor prefix를 여러차례 재사용할 경우가 있는데 이때 재사용할 CSS 선언그룹을 만들 수 있다. 

 

_mixins.scss

//----------------------------------
//      Vendor Prefix
//----------------------------------
// @param {*} $property Property
// @param {*} $value Value
@mixin prefix($property, $value) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  -o-#{$property}: $value;
  #{$property}: $value;
}

// @param {Size} $radius [5px] - Radius
// @require {mixin} prefix

@mixin border-radius($radius: 5px) {
  @include prefix("border-radius", $radius);
}

//----------------------------------
//      Animation & keyframes
//----------------------------------
// Keyframes
// @param {*} $animation-name - Animation name
// @content [Animation css]

@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;
  }
}

// Animation
// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
// @require {mixin} css3-prefix

@mixin animation($str) {
  @include prefix("animation", $str);
}

//------------------
//   placeholder
//------------------

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root("::-webkit-input-placeholder") {
    @content;
  }

  @include optional-at-root(":-moz-placeholder") {
    @content;
  }

  @include optional-at-root("::-moz-placeholder") {
    @content;
  }

  @include optional-at-root(":-ms-input-placeholder") {
    @content;
  }
}

//  float  clearfix
@mixin clearfix {
  &::before {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
   // visibility: hidden;
    height: 0;
  }
}

@mixin ghostVerticalAlign() {
  &:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0.1px;
  }
}

// generic transform
@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}

// rotate
@mixin rotate($deg) {
  @include transform(rotate(#{$deg}deg));
}

// scale
@mixin scale($scale) {
  @include transform(scale($scale));
}
// translate
@mixin translate($x, $y) {
  @include transform(translate($x, $y));
}
@mixin translateX($x) {
  @include transform(translateX($x));
}
@mixin translateY($y) {
  @include transform(translateY($y));
}

//transform origin
@mixin transform-origin($origin) {
  moz-transform-origin: $origin;
  -o-transform-origin: $origin;
  -ms-transform-origin: $origin;
  -webkit-transform-origin: $origin;
  transform-origin: $origin;
}

// Flexbox display
@mixin flexbox {
  display: -webkit-box;
  //@debug: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin justify-content($justify) {
  -webkit-justify-content: $justify;
  -moz-justify-content: $justify;
  -ms-justify-content: $justify;
  justify-content: $justify;
  -ms-flex-pack: $justify;
}
@mixin align-items($align) {
  -webkit-algin-items: $align;
  //algin-items: $align;
}

//Get the value for justify-content
@function getJustify($arg) {
  $justify: (
    "sa": space-around,
    "sb": space-between,
    "se": space-evenly,
    "center": center,
    "fs": flex-start,
    "fe": flex-end,
  );

  @each $key, $value in $justify {
    @if ($key == $arg) {
      @return $value;
    }
  }
}

//Get the value for align-items
@function checkAlign($arg) {
  $align: (
    "b": baseline,
    "s": stretch,
    "sa": space-around,
    "sb": space-between,
    "center": center,
    "fs": flex-start,
    "fe": flex-end,
  );

  @each $key, $value in $align {
    @if ($key == $arg) {
      @return $value;
    }
  }
}

// Display flex
@mixin display-flex() {
  @include flexbox;
  @content;
}


@mixin hover-support {
  @media not all and (pointer: coarse) {
    &:hover {
      @content;
    }
  }
}

 

_common.scss

input { 
  @include prefix(box-sizing, border-box);
  @include prefix(appearance, none);
  @include placeholder {
    color: #aeaeae;
    opacity: 1;
  }
}