Sass(SCSS)の「@mixin」という機能を使ってコーディングの効率化を行います。
「@mixin」を使うことで、毎回書いていたあのコードを簡略化し、簡単に使えるようにします。
他にも、自動計算なども行える「@mixin」でコーディングを効率化!

Sass(SCSS)でコーディングを効率化

「@mixin」とは

「@mixin(ミックスイン)」とは、CSSのスタイルを定義しておいて、別の場所でそのスタイルを使い回せる機能。
引数(cssの値)が利用できるのも特徴です。

「@mixin」の基本

「@mixin」の基本について解説します。

「@mixin」の設定(記述)

下記のように「@mixin hogehoge」のように設定を行います。
「hogehoge」は自分で自由に決めることができます。

@mixin hogehoge {
width: 100px;
height: 100px;
border-radius: 100%;
}

「@mixin」を利用する(呼び出し)

「@include」+先ほど決めた名前を記述することで、使いたいところで呼び出すことができます。

.sample {
@include hogehoge;
background: red;
}

出力結果

.sample {
width: 100px;
height: 100px;
border-radius: 100%;
background: red;
}

引数を使用する方法

引数を使用することで、色々なサイズの対応や状況に合わせて使用できるようになるので、使いやすさがアップします!

引数を使用した「@mixin」の設定(記述)

下記だと「$haba」に数値がか入ります。
ここの名前も自分で自由に決めることができます。

@mixin circle($haba) {
width: $haba;
height: $haba;
border-radius: 100%;
}

引数を使用した「@mixin」を利用する(呼び出し)

先程の「$haba」に数値を入れます。

.sample {
@include circle(250px);
background: red;
}

出力結果

.sample {
width: 250px;
height: 250px;
border-radius: 100%;
background: red;
}

おすすめmixinスニペット集

ウィンドウ幅に合わせてフォントサイズを自動変更

vwでフォントサイズ指定。
ウィンドウ幅に合わせて、デザイン通りのフォントサイズにすることができる。

@mixin fontsize($fsize){
$windowW : 750;
font-size: ($fsize / $windowW) * 100 + vw;
}

//呼び出し
@include fontsize(24);

positionで要素をセンター寄せ

引数「$direction」に「xy(上下左右中央)」、「x(左右中央)」、「y(上下中央)」のいずれかを入れることで、容易に中央寄せできます。
親要素に「position:relative;」忘れに注意!

@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%);
}
}

//呼び出し
.sample{
@include center(xy);
}

フォントサイズと行間指定

@mixin l_height($pixels , $height) {
font-size: $pixels * 1px;
line-height: $height / $pixels;
}

//呼び出し
.sample {
@include l_height(14 , 26);
}

文字感調整

@mixin l_spacing($spacing) {
letter-spacing: ($spacing / 1000 ) + em;
}

// 呼び出し
.class {
@include l_spacing(100);
}

他にも自分が使いやすいように「@mixin」を追加してみてください。

関連記事