自身でよく使うcssをsassにまとめてみた

sassでコーディング効率化！意外と知らなかった？関数いろいろ※cssコンパイル後ソースあり – ツーブロッカ
CSSをスマートに！今日からSassで使える便利なmixin11選｜ferret
SCSS 内でのループ処理 (@for, @while) | まくまくSassノート
Sassでよく使っているmixinを紹介します | ウェブマガジン カミナリ | 鳥取県米子市のホームページ制作・広告代理店・デザイン
【SCSS】Web制作時に物凄く便利な＠mixinベスト5｜BLOG｜HIGA TSUBASA – ポートフォリオ｜COFUS
【実用的なサンプル多数】Sassのmixinのおすすめ10選 | Web-Guided - web業界で働く方を少しだけ手助けするメディア

以下は上記を参考にさせていただきました！！

関数とmixin,アニメーションのSass **

// 小数点以下の桁数
$d:2;

// ブラウザ横幅基準値
$parent_width:1920;


@for $i from 1 through 20 {
  .mt-#{$i} { margin-bottom: 1px * $i; }
}
@for $i from 1 through 20 {
  .mb-#{$i} { margin-bottom: 1px * $i; }
}


// 関数ここから

// Round (四捨五入)
@function round-decimal ($number, $digits: 0) {
  @if $number == 'auto' {
    @return auto;
  }
  @else{
    @return to-fixed(($number / $parent_width) *100vw, $d, 'round');
  }
}

// Ceil (切り上げ)
@function ceil-decimal ($number, $digits: 0) {
  @if $number == 'auto' {
    @return auto;
  }
  @else{
    @return to-fixed(($number / $parent_width) *100vw, $d, 'ceil');
  }
}

// Floor (切り捨て)
@function floor-decimal ($number, $digits: 0) {
  @if $number == 'auto' {
    @return auto;
  }
  @else{
    @return to-fixed(($number / $parent_width) *100vw, $d, 'floor');
  }
}

@function to-fixed ($number, $digits: 0, $round: 'round') {
  $n: 1;
  // $number must be a number
  @if type-of($number) != number {
      @warn '#{ $number } is not a number.';
      @return $number;
  }
  // $digits must be a unitless number
  @if type-of($digits) != number {
      @warn '#{ $digits } is not a number.';
      @return $number;
  } @else if not unitless($digits) {
      @warn '#{ $digits } has a unit.';
      @return $number;
  }
  @for $i from 1 through $digits {
      $n: $n * 10;
  }
  @if $round == 'round' {
      @return round($number * $n) / $n;
  } @else if $round == 'ceil' {
      @return ceil($number * $n) / $n;
  } @else if $round == 'floor' {
      @return floor($number * $n) / $n;
  } @else {
      @warn '#{ $round } is undefined keyword.';
      @return $number;
  }
}


// mixinここから


// margin
@mixin margin($t, $r, $b, $l) {
  margin:round-decimal($t)
  round-decimal($r)
  round-decimal($b)
  round-decimal($l)
}
// margin-top
@mixin mt($w) {
  margin-top: round-decimal($w);
}
// margin-right
@mixin mr($w) {
  margin-right: round-decimal($w);
}
// margin-bottom
@mixin mb($w) {
  margin-bottom: round-decimal($w);
}
// margin-left
@mixin ml($w) {
  margin-left: round-decimal($w);
}


// padding
@mixin padding($t, $r, $b, $l) {
  padding:round-decimal($t)
  round-decimal($r)
  round-decimal($b)
  round-decimal($l)
}
// padding-top
@mixin pt($w) {
  padding-top: round-decimal($w);
}
// padding-right
@mixin pr($w) {
  padding-right: round-decimal($w);
}
// padding-bottom
@mixin pb($w) {
  padding-bottom: round-decimal($w);
}
// padding-left
@mixin pl($w) {
  padding-left: round-decimal($w);
}

// font-size
@mixin font-size($w) {
  font-size: round-decimal($w);
}

// width
@mixin width($w) {
  width: round-decimal($w);
}

// height
@mixin height($w) {
  height: round-decimal($w);
}

// position : absoluteでのtop位置
@mixin at($w) {
  top: round-decimal($w);
}
// position : absoluteでのright位置
@mixin at($w) {
  right: round-decimal($w);
}
// position : absoluteでのbottom位置
@mixin at($w) {
  bottom: round-decimal($w);
}
// position : absoluteでのleft位置
@mixin at($w) {
  left: round-decimal($w);
}

// float使用時のclearfix
@mixin clearfix {
  &::after {
    content: '';
    display: block;
    clear: both;
  }
}

// 疑似要素初期化
// ----------------------------------------------------------
@mixin icon-ini {
  content: '';
  display: inline-block;
}

// 親要素に対して中央寄せ
@mixin absolute-center($direction) {
	position: absolute;
	@if $direction==xy {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	@else if $direction==x {
		left: 50%;
		transform: translateX(-50%);
	}
	@else if $direction==y {
		top: 50%;
		transform: translateY(-50%);
	}
}

// addClassなどで.showedというclassが付与された時によく使用する設定
@mixin fadein {
  opacity: 0;
  transition:1s;
  &.showed{
    opacity: 1;
  }
}

// グラデーション背景
@mixin bg-gradient($angle: 180deg, $color: #0bd, $amount: 20%) {
  background: linear-gradient($angle, $color, adjust-hue($color, $amount)) fixed;
}

// 文字にグラデーション
@mixin gradient-text($angle: 45deg, $color: #f82, $amount: 35%) {
  color: $color;
  background: -webkit-linear-gradient($angle, $color, adjust-hue($color, $amount));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: inline-block;
}

// 長文テキストを枠内に収める
@mixin truncate($width: 100%) {
  width: $width;
  max-width: 100%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 両端揃えの設定
@mixin justify(){
  text-align: justify;
  text-justify: inter-ideograph;
}


// 07__くの字矢印
@mixin arrow($width, $bold, $color, $deg) {
  @include icon-ini;

  border-color: $color;
  border-style: solid;
  border-width: 0 #{$bold}px #{$bold}px 0;
  height: #{$width}px;
  vertical-align: middle;
  width: #{$width}px;
  //角度
  @if ($deg == 'left') {
      transform: rotate(135deg);
  }

@else if ($deg == 'top') {
      transform: rotate(225deg);
  }

@else if ($deg == 'right') {
      transform: rotate(-45deg);
  }

@else if ($deg == 'bottom') {
      transform: rotate(45deg);
  }

  // @include ie11only() {
  //     margin-bottom: 1px !important;
  // }
}


// 擬似要素で三角形
@mixin triangle($direction, $width, $height, $color){
	width: 0;
	height: 0;
	border-style: solid;
	$valWidth: $width / 2;
	$valHeight: $height / 2;
	@if ($direction == top) {
		border-width: 0 $valWidth $height $valWidth;
		border-color: transparent transparent $color transparent;
	} @else if ($direction == left) {
		border-width: $valHeight $width $valHeight 0;
		border-color: transparent $color transparent transparent;
	} @else if ($direction == right) {
		border-width: $valHeight 0 $valHeight $width;
		border-color: transparent transparent transparent $color;
	} @else if ($direction == bottom) {
		border-width: $height $valWidth 0 $valWidth;
		border-color: $color transparent transparent transparent;
	}
}


//アニメーションここから
@keyframes fadein {
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

関数とmixin読み込み側のsassの例

@charset "utf-8";


// インポートするsassファイル
@import "_func_mixin.scss";
@import "_animation.scss";


#contents{
  position: relative;

  a{
    transition: .2s;
    &:hover{
      opacity: .7;
    }
  }

  .fadein{
    @include fadein;
  }

  h2{
    @include margin(400,300,auto,auto);
    @include padding(400,300,auto,900);
    @include font-size(100);
    @include width(200);
    @include height(300);
    @include mt(30);
    @include pl(30);
    @include at(1000);
    background: red;
    display: block;
    position: absolute;

    // @include clearfix;
    &::after{
      @include icon-ini;
      width: 100px;
      height: 100px;
      background-color: aqua;
      @include absolute-center(xy);
      z-index: 5;
    }

    // animation: fadein 3s ease 1s infinite;



  }

  h3{
    @include gradient-text();
  }
  h4{
    @include justify();
  }
  h5{
    @include truncate();
    width: 50px;
  }
  p.arrow{
    @include arrow(30, 3, rgb(33, 100, 226),left);
  }
  p.triangle{
    @include triangle(right, 100px, 100px, yellow );
  }

}