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

カテゴリー:
CSS
Sass

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

Sass mixin

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

コンパイル後

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です