皆さんこんばんわ！AbeGoblinです！
ここ最近は少し体調を崩しておりまして。。。更新が滞っておりました。反省ですね。。。
今回はですね、現場でよく使用されているmixinを4つほどご紹介させていただきます！現場って言っても僕が使っているだけですがね！！
おすすめ記事はこちら
さぁコードだ！！
mixinですんで、今回はscssのみになります！ガシガシと、とりあえず使ってみましょう！
ベースのhtml・cssはこれです！！
html
<div class="hoge">ほげほげぇー！！</div>css
.hoge{
width:80%;
height:200px;
padding:20px;
text-align:center;
border:1px solid #000;
}
グラデーションのmixin
mixin.scss
@mixin gradients($top, $bottom) {
background-image: -webkit-gradient(linear, left top, left bottom, from($top), to($bottom));
background-image: linear-gradient($top, $bottom);
}edit.scss
.hoge{
@include gradients(#fff,#000);
}はいこちらは上から下へのグラデーションですね！
$topと$bottomにはそれぞれHEXで色を入れましょう！きれいなグラデーションができますよ！
ボックスシャドウのmixin
mixin.scss
@mixin boxShadow($x, $y, $blur, $spread, $color, $inset: null ) {
-webkit-box-shadow: $x $y $blur $spread $color $inset;
box-shadow: $x $y $blur $spread $color $inset;
}edit.scss
.hoge{
@include boxShadow(3px,6px,0px,3px,#aaa);
}はいこちらはボックスシャドウですね！
box-shadowプロパティを使用したことがある人はわかるかと思いますが、$x, $y, $blur, $spreadはpx等での指定、$colorはHEXまたはrgb,rgbaで指定しましょう！これがまた使えるんですよ！マジ重宝！！
オパシティのmixin
mixin.scss
@mixin opacity($ratio: .7) {
opacity: $ratio;
}edit.scss
.hoge{
background:#000;
color:#fff;
@include opacity(.5);
}はいこちらはオパシティですね！
今回は透明感をわかるように黒を入れました！透明になってますね！！aタグのhover時に設定しておくと、いい感じにhoverアクションを設定できます！とっても便利！
フォントサイズのmixin
mixin.scss
@mixin fontsize($size: $font-size) {
font-size: ($size / 16px) * 1rem;
}edit.scss
.hoge{
@include fontsize(38px);
}はいこちらは文字サイズですねー！
これが一番使います！マジで便利！皆さんもよく使っているのではないのでしょうか！今回は16pxをベースにしてますが、値を変更することでもっと汎用性が増しそうですね！！
まとめ
はい、僕がよく使っているmixinを4つほどご紹介させていただきました！グラデのものに関しては、デザイン次第で使ったり使わなかったりですが、それ以外はほぼほぼ常用って感じです！
mixinをお探しの方、ぜひ参考にしていただければと思います！快適に簡単に！なるべく楽してコーディングをしてしまいましょう！！
はい、それでは今回はこの辺で終わりにしようと思います！それではー(^q^)ﾉｼ
