Sass の @extend で存在しないセレクタを指定する

Rails で使っている Sass で、先日書いた input sbumit ボタンのデザインを一括指定する CSS がエラーを吐くようになってしまった。結論を言うと、Sass で @extend を使う際に !optional フラグを使うことで解決できました。

スポンサーリンク

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

“input[type=”submit”]” failed to @extend “.btn-large” エラー

ブラウザで Rails のビューを更新しようとすると以下のエラーが出るようになりました。

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

!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

これで、冒頭のエラーが出なくなりました。

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

Leave Your Message!