Sass（SCSS）でコーディング効率化【mixinスニペット集】

今回はSass（SCSS）の「@mixin」という機能を使って超効率化を目指したいと思います。
「@mixin」を使うことで、毎回書いていたあのコードを・・・？簡略化できてしまいます。
他にも、自動計算などコーディングの効率化をはかるには欠かせません。

 

Sass（SCSS）でコーディング効率化

「@mixin」とは

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

「@mixin」の基本

「@mixin」の設定（記述）

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

 

「@mixin」を利用する（呼び出し）

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

 

出力結果

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

 

引数を使用する方法

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

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

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

 

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

.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);
}

 

「line-height」の上下の必要ないspaceを削除する

「line-height」が入るとデザインデータ通りのスペースとコーディング嬢の数値が合わなくなってしまいます。
原因としては、テキストの行間が初めの行と最後の行にも反映されてしまうから。
その「line-height」でできてしまった余計なスペースを削除するためのmixinです。

@mixin del-space($line-height) {
    &::before, &::after {
        content: "";
        width: 0;
        height: 0;
        display: block;
    }
    &::before {
        margin-top: calc((1 - #{$line-height}) * .5em);
    }
    &::after {
        margin-bottom: calc((1 - #{$line-height}) * .5em);
    }
}

// 使用する
.sample{
    line-height: 1.6;
    @include del-space(1.6);
}