Sass(SCSS)の@mixinは使いこなせればとても便利になりますし、より素早くコーディングするには必須です。
カスタマイズしやすいのでオリジナルのmixinを作ってみてください。
今回は私がよく使うSassの@mixinをまとめて紹介します。
フォントサイズ
@mixin fz($sizee: 1.6) { font-size: ($sizee * 10) + px; font-size: $sizee + rem;}サイズ
//サイズ @mixin size($width, $height) { width: $width; height: $height;}//サイズ 正方形@mixin square($size) { @include size($size, $size);}//サイズ 丸@mixin circle($size) { @include size($size, $size); border-radius: 50%;}position関連
//天地中央配置@mixin centering { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}//position absolute@mixin absolute ($top: auto, $right: auto, $bottom: auto, $left: auto, $zindex: auto) { position: absolute; top: $top; right: $right; bottom: $bottom; left: $left; z-index: $zindex;}@mixin absolute_top_left($top: 0, $left: 0) { position: absolute; top: $top; left: $left;}@mixin absolute_top_right($top: 0, $right: 0) { position: absolute; top: $top; right: $right;}@mixin absolute_bottom_left($bottom: 0, $left: 0) { position: absolute; bottom: $bottom; left: $left;}@mixin absolute_bottom_right($bottom: 0, $right: 0) { position: absolute; bottom: $bottom; right: $right;}画像置換
@mixin img_repl { overflow: hidden; text-indent: 100%; white-space: nowrap;}文字の最後に...をつける
@mixin ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}keyframes
@mixin keyframes($animation-name) { @keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-webkit-keyframes #{$animation-name} { @content; }}矢印のアイコンを指定
@mixin arrow ($color:$colorMain, $right:auto, $left:auto) { width: 100%; display: block; position: relative; display: inline-block; vertical-align: middle; &:before { content: ""; position: absolute; top: 0; bottom: 0; right: $right; left: $left; width: 8px; height: 8px; margin: auto; vertical-align: middle; border-top: 2px solid $color; border-right: 2px solid $color; transform: rotate(45deg); }}
