【sass】自分が使えると思っているmixin集

色々な方がmixinを公開していて色々助かっているのですが、微妙に使いづらいと思うものもあります。
それは実際に使い辛いものではなく単純に自分と合わないだけなのかと。

なので自分に合う”ちょっとした”mixinをいかにまとめますので、
使えそうなのがあれば使ってみてください。

 

 テキストの縦中心表示

結構使うことも多い方法だと思うのですが、要はheightとline-heightを同じ値にすることで
縦中央配置することが出来ます。
いちいち2つ書くのを面倒なのでmixin化しました。
引数にheightとline-heightに設定する値(px, remなども)を入力します。

@mixin ht($val) {
	height      : $val;
	line-height : $val;
}

 

フォントサイズの設定

かなり使うと思うのですがフォントのサイズと太さをまとめて設定するmixinです。
1つ目の引数にはフォントのサイズ
2つ目の引数は太字にする場合のみ”b”を入力

@mixin fs($size, $weight: '') {
	font-size: $size + px;
	font-size: ($size / 10) * 1rem;

	@if $weight == 'b' {
		font-weight : bold;
 	}
}

 

絶対配置

レスポンシブコーディングするようになってから余り使わない印象の
絶対配置のmixinです。

positionやtop, left等をまとめて設定出来るようにしてあります。
1つ目の引数はtopの値
2つ目の引数はrightの値
3つ目の引数はbottomの値4つ目の引数はleftの値
5つ目の引数はz-indexの値

1～4の引数はmarginやpaddingをまとめて設定する時と同じ順番です。
またこのmixinは1点注意点があり、1～4の引数で使わないものは0ではなく『””』空白を入れる必要があります。
デフォルトで0が入ると0を設定した方に配置される場合がありますので。。

@mixin pos($top: '', $right: '', $bottom: '', $left: '', $z: 1) {

	position: absolute;
	@if $top    != '' { top    : $top + px; }
	@if $right  != '' { right  : $right + px; }
	@if $bottom != '' { bottom : $bottom + px; }
	@if $left   != '' { left   : $left + px; }	

	z-index : $z;
}