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」を追加してみてください。
