scss 混入スニペット

Posted 2021-05-18

// @include fontsize(15);
@mixin fontsize($size: 24, $base: 16) {
    font-size: $size + px;
    font-size: ($size / $base) * 1rem;
}

@mixin vendor-prefix($name, $argument) {
    -webkit-#{$name}: #{$argument};
    -ms-#{$name}: #{$argument};
    -moz-#{$name}: #{$argument};
    -o-#{$name}: #{$argument};
    #{$name}: #{$argument};
}

 // clearfix
@mixin clearfix {
    zoom: 1;
    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }
}

// 第一引数で基準となる画面幅のフォントサイズ、第二引数で基準となる画面幅を入力
@function get_vw($size, $viewport:320){
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

@mixin fz_vw($font_size:10){
  font-size: $font_size * 1px;
  font-size: get_vw($font_size);
}

//@include flex;
@mixin flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

//@include middle(10)
@mixin middle($height){
  height:$height + px;
  position:absolute;
  top:50%;
  margin-top: -($height / 2) +px;
}

//@include tablet{width:100%}
@mixin tablet {
    @media only screen and (min-width: 768px) {
        @content;
    }
}

@mixin pc {
    @media only screen and (min-width: 992px) {
        @content;
    }
}

@mixin widepc {
    @media only screen and (min-width: 1200px) {
        @content;
    }
}

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacityIE: $opacity * 100;
    filter: alpha(opacity=$opacityIE);
}

@mixin box-sizing{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

//ie hack
//@include hack(gteIE10)
@mixin hack($IE-ver: null) {
  @if $IE-ver == 'lteIE8' { // IE8以下
    @media \0screen\,screen\9 {
      @content;
    }
  }
  @else if $IE-ver == 'gteIE9' { // IE9以上
    @media screen and (min-width:0\0) {
      @content;
    }
  }
  @else if $IE-ver == 'gteIE10' { // IE10以上
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      @content;
    }
  }
  @else if $IE-ver == 'gteIE11' { // IE11以上
    @at-root _:-ms-fullscreen,:root & {
      @content;
    }
  }
  @else if $IE-ver == 'notIE8' { // IE8じゃないとき(他のブラウザも含める)
    @media all and (min-width: 0) {
      @content;
    }
  }
}