詳しくはこちら
【実用的なサンプル多数】Sassのmixinのおすすめ9選
Sass（本記事ではScss記法）には便利な機能がいくつもあります。今回はその中でも特に便利なmixinを紹介していきます。
mixinのサンプルを紹介しているサイトは幾つもありますが、「このmixinってすごいけどどこで使うの？」というものもチラホラ見かけます。
しかし、今回紹介するmixinは、実際に私が業務で何度も使い、日々改良してきたものです。
実用性抜群のものばかりです。
mixinを使えばコードの記述量が減り、可読性があがったりなど作業効率が格段にアップするので、ぜひ使ってみてはいかがでしょうか。
目次
mixinについて
基本的な知識
まず、mixinについて簡単に説明します。
予めよく使うスタイルを登録しておくことで、それを簡単に呼び出せる機能がmixinです。
mixinを定義するには、@mixin 任意の名前のように書き、登録したいスタイルを{}の中に書きます。
@mixin heading{
font-size: 2rem;
font-weight: bold;
text-align: center;
margin-top: 40px;
}そして、登録したmixinを呼び出すには、@include 定義した名前で呼び出します。
h2{
@include heading;
}これでscssをコンパイルすると、以下のようになります。
h2{
font-size: 2rem;
font-weight: bold;
text-align: center;
margin-top: 40px;
}引数を使ってみる
先程紹介した方法だと、mixinを定義した時のスタイルのプロパティと値がそのまま反映されます。
しかし、引数を使うことで、呼び出し時に値を自由に変更することが出来ます。
文章だけではピンとこないと思うので、以下のサンプルを用意しました。
@mixin heading($fontSize){
font-size: $fontSize;
}
h2{
@include heading(2rem);
}
h3{
@include heading(1.8rem);
}これらをコンパイルすると、h2にはfont-size: 2rem、h3にはfont-size: 1.8remとなります。
上記のサンプルのように、mixinの定義時には、名前の後に括弧で引数を設定することが出来ます。
mixin集
background-image
何かと記述量が多いbackgroundプロパティですが、それをmixinにすることで記述量が圧倒的に少なくなります。
最初に$PATH_IMGに画像のファイルまでのパスを設定しておきます。このようにパスを設定しておくことで、他の箇所でもパスを省略することが出来たり、打ち間違いを防ぐことが出来ます。
呼び出し時には、引数に画像のファイル名を与えてあげます。
$PATH_IMG: "/assets/img/";
@mixin background-image($fileName) {
background-image: url($PATH_IMG + $fileName);
background-repeat: no-repeat;
background-position: 50% 50%;
@content;
}また、@contentを使うことで、呼び出し時に他のbackgroundプロパティを追加することも出来ます。
親要素に対して中央寄せ
親要素に対して子要素を中央寄せにするmixinです。
引数に x, y, xy いずれかを与えることで、どのように中央寄せするかを指定することが出来ます。中央寄せの種類は以下3つです。
- x：横方向中央寄せ
- y：縦方向中央寄せ
- xy：縦横方向中央寄せ
@mixin 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%);
}
}使用時には親要素にposition: rerativeをかけるのを忘れないようにしましょう。
clear-fix
floatを解除する時は、親要素に対してclear-fixのクラスを付与するのが一般的だと思いますが、それをmixinで行うことも出来ます。
mixinで解除するメリットとしては、マルチクラスにならないのでhtmlが見やすくなったり、sassだけでスタイルを管理出来る点です。
@mixin cf {
&:after {
content: "";
display: block;
clear: both;
}
}counter-increment
自動で連番を付与できるcounter-incrementのmixinです。
第一引数には、カウンターの名前を与えてあげます。
第二引数と第三引数には、連番の前後に表示させたい値を与えてあげます。デフォルトでは空の値を与えているので、第一引数だけを与えて、第二、第三引数は省略することも可能です。
@mixin counter($numName, $beforeText, $afterText) {
content: "#{$beforeText}" counter(num_ + $numName) "#{$afterText}";
counter-increment: num_ + $numName;
}使用時には連続する要素の親にcounter-resetをかけるのを忘れないようにしましょう。
グラデーション
2色で均等の割合で色が変化するシンプルなグラデーションのmixinです。
第3引数でグラデーションの方向を指定しており、デフォルトは縦方向です。
@mixin gradient($startColor, $endColor, $orientation: ttob) {
background: $startColor;
@if $orientation == ttob {
background: -webkit-linear-gradient(top, #{$startColor} 0%, #{$endColor} 100%);
background: linear-gradient(to bottom, #{$startColor} 0%, #{$endColor} 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr=' #{$endColor}', GradientType=0);
} @else if $orientation == ltor {
background: -webkit-linear-gradient(right, #{$startColor} 0%, #{$endColor} 100%);
background: linear-gradient(to right, #{$startColor} 0%, #{$endColor} 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr=' #{$endColor}', GradientType=1);
}
}疑似要素でアイコン
先程紹介したbackground-imageのmixinを少しカスタマイズしたものです。主に疑似要素で画像を使ったアイコンを作る際に使用する想定です。
こちらも画像のパスの一部に変数を使用することで保守制が向上します。
@mixin icon($fileName, $width, $height) {
background: url($path_img + $fileName) no-repeat 50% 50%;
background-size: $width $height;
width: $width;
height: $height;
}Media Queries
meadia queryも普通に記述するとなかなか手間なのでmixinにすることで格段に記述が楽になります。
引数にscreenのwidthを与えて使用します。引数に与えるwidthを変数にすることで、より運用しやすいコードになります。
$BREACKPOINT_PC: 1080px;
$BREACKPOINT_TB: 920px;
$BREACKPOINT_SP: 640px;
@mixin max-screen($breakPoint) {
@media screen and (max-width: $breakPoint) {
@content;
}
}
@mixin min-screen($breakPoint) {
@media screen and (min-width: $breakPoint) {
@content;
}
}
@mixin screen($breakPoint_min, $breakPoint_max) {
@media screen and (min-width: $breakPoint_min) and (max-width: $breakPoint_max) {
@content;
}
}擬似要素で三角形
三角形を疑似要素で作りたい時に使えるmixinです。三角形の方向を上下左右で指定することが出来ます。
方向、サイズ、色を自由に設定できるので、かなり便利です。
@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;
}
}複数行のテキストに下線を引く
テキストに下線を引くにはborder-bottomや疑似要素を使うことで実現可能ですが、それはテキストが一行の場合にのみ可能です。
2行以上になった場合、最終行にのみ下線が引かれ、それ以外の行には引かれません。
以下のmixinは、グラデーションとインライン要素を組み合わせることで、複数行にも対応可能な下線を引くことが可能になります。
@mixin line($color: #ff0, $height: 65%){
background: linear-gradient(transparent $height, $color 0%);
display: inline;
}まとめ
mixinはとても便利でコーディングの時間を短縮させてくれる便利な機能です。
しかし、引数を多く設定したり複雑な仕組みにしたりすると、作った人以外分からなくなることもあります。mixinを作る、使う際は運用・開発メンバーでルールを決めるなどして修正・運用時のことも考えて使うようにしましょう。
関連記事
