- 更新日: 2014年3月15日
- HTML & CSS
Sass の @extend で存在しないセレクタを指定する
Rails で使っている Sass で、先日書いた input sbumit ボタンのデザインを一括指定する CSS がエラーを吐くようになってしまった。結論を言うと、Sass で @extend を使う際に !optional フラグを使うことで解決できました。
画像付き英語辞書 Imagict | 英単語をイメージで暗記— 環境 —
Firefox 27.0.1
Rails 4.0.1
bootstrap-sass 3.0.2.0
“input[type=”submit”]” failed to @extend “.btn-large” エラー
ブラウザで Rails のビューを更新しようとすると以下のエラーが出るようになりました。
|
1 2 3 4 5 6 7 8 9 |
Sass::SyntaxError in Home#index Showing /path/to/app/views/layouts/application.html.erb where line #5 raised: "input[type="submit"]" failed to @extend ".btn-large". The selector ".btn-large" was not found. Use "@extend .btn-large !optional" if the extend should be able to fail. ... <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> |
The selector “.btn-large” was not found.（.btn-large が存在しない）のエラーが出てます。調べた所、bootstrap3 で削除されたセレクタらしい。stylesheet のリンクでのエラーを確認でき、Use “@extend .btn-large !optional” の行で !optional フラグを使え！と大事なエラーメッセージが出力されています。
Rails + bootstrap-sass で submit ボタンに class, id を割り当てずに css を指定 | EasyRamble の記事で書いた以下の指定の部分です。
app/assets/stylesheets/custom.css.scss
|
1 2 3 4 5 6 |
/* form */ input[type="submit"] { @extend .btn; @extend .btn-large; @extend .btn-primary; } |
!optional フラグとはなんぞや？
@extend の !optional フラグが分からなかったので調べたら、Sass の公式ドキュメントに掲載されていた。
Sometimes, though, you want to allow an @extend not to produce any new selectors. To do so, just add the !optional flag after the selector. For example:
新たなセレクタ（css のクラス名やID名）を作成せずに（存在しないセレクタに対して） @extend を指定したい場合、@extend で指定するセレクタの後ろに !optional フラグを追加してね、とあります。なるほどー option で追加してね、という意味の !optional なわけか。
なので、該当部分を以下のように変更しました。
app/assets/stylesheets/custom.css.scss
|
1 2 3 4 5 |
input[type="submit"] { @extend .btn !optional; @extend .btn-large !optional; @extend .btn-primary !optional; } |
これで、冒頭のエラーが出なくなりました。
- HTML & CSS の関連記事
- 画像がはみ出るのを防ぐCSSスタイルシート指定(モバイル・スマホ対応)
- SassとSCSSを変換するsass-convertコマンドとウェブサービス
- CSSをBEM/MindBEMdingの命名規則で書いてみる
- Twitter Bootstrapのデザインと挙動を気軽にテストできるBootplyが超絶便利！
- CSSでスクロールバーをデザイン(WebKitブラウザ)
- はてなブックマーク人気記事ブログパーツのデザイン変更
- Twitter Bootstrapで端末サイズ毎にHTML要素の表示・非表示を切り替え
- Bootstrap3をInternet Explorer8(IE8)に対応させる
- Twitter Bootstrap のカスタマイズをライブラリ本体に手を入れずに行う
- Rails + bootstrap-sass で submit ボタンに class, id を割り当てずに css を指定
Leave Your Message!