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

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

スポンサーリンク

— 環境 —
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 違反だと感じます。

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

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

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

app/assets/stylesheets/custom.css.scss

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

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

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

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

ビューファイル

app/assets/stylesheets/custom.css.scss

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

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

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

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!