[Sass]@mixinで作る横並びの定義リスト

受注案件等で会社概要や役員名簿などをWEBサイトに掲載するときに、定義リストを横並びにして使うことがけっこうあるのですが、引数付きのmixinを利用するとスタイルの使い回しが楽なのでサンプルコードを掲載してみます。

Sass mixin

引数の意図は、
$dt_w → dtの幅。中に入れたい文字数やデザインにあわせて調整する。
$dd_pl → ddの左側のパディング。dtの幅+アルファ分余白を取る。
という感じです。

@mixin parallel_dt_dd($dt_w,$dd_pl) {
	dt{
		float:left;
		width: $dt_w;
	}
	dd{
		margin-left: 0;
		padding-left: $dd_pl;
	}
}

//必要な箇所で必要な引数を入れて使います。
dl {
	@include parallel_dt_dd(11em,12em);
}

コンパイル後

dl dt {
	float: left;
	width: 11em;
}

dl dd {
	margin-left: 0;
	padding-left: 12em;
}

ddにborder-bottomを設定すると、dtとddをまたいだ下線を入れることができるので、けっこう気に入ってます。