WordPress

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);
}
ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)