痒い所に手が届きそうなmixinを作ってみた

はじめまして。初投稿です。Scssで痒いところに手が届きそうなmixinを書いてみました。

目次

・line-heightで発生した余白を取り除くmixin
・line-heightの設定のmixin
・ボタンやスマホサイトによくあるくの字マーク（右向き、左向き）を表示させるmixin
・カンプの幅からコンテンツ幅のパーセンテージを出すmixin
・フェードインアニメーションを出すmixin
・震えるアニメのmixin
・line-heightで発生した余白を取り除く関数を数値だけ設定するfunction
・ptをpxに変換するmixin
・ptをremに変換するmixin

引用元

decimal-fllor,strip-unit関数はこちらから引用させていただきました。
https://www.nxworld.net/tips/sass-number-operations-and-functions.html

フェードインアニメーション
https://www.gatch.site/entry/css-fadein-animation
震えるCSSアニメーション
https://q-az.net/buruburu-hurueru-css/

ソースコード

gitHubに公開してあります。自己責任でお使いください。
SassUtility

line-heightで発生した余白を取り除くmixin

_mixin.scss

@mixin lh-marginremove($font-size,$va,$base-margin){
  line-height:decimal-floor(strip-unit($va/$font-size),1);
  $newmargin : $base-margin - ($font-size * (strip-unit($va/$font-size) - 1));
  margin-top:$newmargin;
  margin-bottom:$newmargin;
}

$font-sizeは要素のフォントサイズ(px),$vaにはデザインカンプの行送り,$base-marginは本来設定するmarginが入ります。

line-heightの設定のmixin

_mixin.scss

@mixin line-height($font-size,$va){
   line-height:decimal-floor((strip-unit($va/$font-size)),1);
}

$font-sizeは要素のフォントサイズ(px),$vaにはデザインカンプの行送りが入ります。

ボタンやスマホサイトによくあるくの字マーク（右向き、左向き）を表示させるmixin

右向き

_mixin.scss

@mixin arrowMark($color,$width,$height){
  content: '';
  width: $width;
  height: $height;
  border: 0px;
  border-top: solid 2px $color;
  border-right: solid 2px $color;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

左向き

_mixin.scss

@mixin arrowMarkReverse($color,$width,$height){
  content: '';
  width: $width;
  height: $height;
  border: 0px;
  border-top: solid 2px $color;
  border-right: solid 2px $color;
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

$colorにはRGB,$widthには幅,$heightには高さを入れます。

カンプの幅からコンテンツ幅のパーセンテージを出すmixin

_mixin.scss

@mixin SPWidth($designwidth,$content){
    width:decimal-floor(($designwidth/$content * 10 * 1%),0);
}

$designwidthには、デザインの100% の幅、$contentには、コンテンツ幅を入れます。

フェードインアニメーションを出すmixin

_mixin.scss

@mixin fadein($duration,$timing-function,$delay,$iteration-count,$direction,$mode){

  animation-name:fadein;
  animation-duration:$duration; //アニメーション時間
  animation-timing-function: $timing-function; //アニメーションさせるイージング
  animation-delay:$delay; //アニメーション開始させる時間
  animation-iteration-count:$iteration-count; //繰り返し回数
  animation-direction:$direction; //往復処理をするかどうか
  animation-fill-mode: $mode; //アニメーション後のスタイルをどうするか

  @keyframes fadein {
    0% {opacity: 0}
    100% {opacity: 1}
  }
}

フェードインの仕方は、keyframesを変更すればカスタマイズできます。

震えるアニメーション

_mixin.scss

@mixin shakeanime($maxmove,$mindeg,$maxdeg,$delay){

  animation: shake $delay infinite;

  @keyframes shake {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate($maxmove, $maxmove) rotateZ($maxdeg)}
    50% {transform: translate(0px, $maxmove) rotateZ(0deg)}
    75% {transform: translate($maxmove, 0px) rotateZ($mindeg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
  } 
}

line-heightで発生した余白を取り除く関数を数値だけ設定するfunction

_mixin.scss

@function lh-mpremove($font-size,$va,$base-margin){
  $newmargin : $base-margin - ($font-size * (strip-unit($va/$font-size) - 1));
  @return $newmargin;
}

ptをpxに変換

_mixin.scss

@function ptconvertpx($pt){
  @return $pt*1.33;
}

ptをremに変換

_mixin.scss

@function ptconvertrem($pt){
  @return decimal-floor(($pt * 1.33 / 10 * 1rem),1);
}

現状、Windowsしか作っていないので、MacやiPhone用は今度作ります。