更新日: 2014年2月27日
HTML & CSS

Rails + bootstrap-sass で submit ボタンに class, id を割り当てずに css を指定

Rails に限った話ではないのですけれど、input type=”submit” の submit ボタン要素は、ウェブアプリケーションの色んな箇所で使います。ユーザー登録、サインイン、設定編集、投稿などなど。この submit ボタンに対して、一括して Sass(SCSS) でデザインの指定を行うTips。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

— 環境 —
Firefox 27.0.1
Rails 4.0.1
bootstrap-sass 3.0.2.0

class: “btn btn-large btn-primary” をビューファイルのあちこちに書きたくない

Ruby on Rails チュートリアル：実例を使って Rails を学ぼうは何度も読んでて大変素晴らしいんだけど、気になる点の1つが以下。

Twitter bootstrap の css class が、ビューファイルの色んな箇所の submit ボタンに指定してあって、DRY 違反だと感じます。

class: "btn btn-large btn-primary"

1	class: "btn btn-large btn-primary"

これを、あちこちのビューファイルに直書きするのは、メンテナンス性が低下すると思う。submit ボタンのデザインを変更する際には、このビューファイルのあちこちに散らばった class 指定を全部編集しなければなりません。

SCSS の @extend で .btn などを継承する

そこで、今日思いついて試したら、上手くいったのが以下の方法です。ビュー側の submit ボタンには class, id などを何も指定しないようにする。その後、以下を scss ファイルに追記。

app/assets/stylesheets/custom.css.scss

/* form */
input[type="submit"] {
  @extend .btn;
  @extend .btn-large;
  @extend .btn-primary;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* form */

input[type="submit"] {

@extend .btn;

@extend .btn-large;

@extend .btn-primary;

margin-top: 20px;

margin-bottom: 20px;

}

これで、全ての input type=”submit” ボタン要素に、.btn, .btn-large, .btn-primary が適用されます。ただし、弱点が一つあって、input[type=”submit”] は、IE6など古いブラウザだと動作しない模様です。ここは要検証ではあるけど、デザイン端折りたい時はこの方法を採用しよう。

ビューの submit に class 指定する場合

安全策を取るなら、ビューファイルでデザインが共通する html 要素に、同じ class 指定を行い、scss ファイルでその class に対して extend するという方法のほうが良いかも。

css class をビュー側に指定する場合でも、以下のようにしたほうがメンテナンス性が上がるんじゃないか、と考えました。

ビューファイル

<%= f.submit "Follow", class: "follow_submit" %>

1	<%= f.submit "Follow", class: "follow_submit" %>

app/assets/stylesheets/custom.css.scss

/* form */
input.follow_submit {
  @extend .btn !optional;
  @extend .btn-large !optional;
  @extend .btn-primary !optional;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* form */

input.follow_submit {

@extend .btn !optional;

@extend .btn-large !optional;

@extend .btn-primary !optional;

margin-top: 20px;

margin-bottom: 20px;

}

以上のように書いておけば、submit ボタンのデザイン変更時に、scss ファイルだけを編集すれば、ビューで class: “follow_submit” が指定されてある submit ボタンのデザインが全部いっぺんに変更できます。ビューファイルをちまちま1個ずつ変更せずに済むので楽かな〜と。

【追記　2014/03/15】
Sass でセレクタを作成せずに @extend を使う | EasyRamble に書いたエラーが出たため、@extend に !optional フラグを追加しました。
【追記ここまで】

Sass(SCSS) の力はすごいと思うのですが、あまり詳しくはないので突っ込み歓迎です。

私は CSS がちょっと苦手なので勉強せねば...