質問: ### 前提・実現したいこと ruby on railsで、自分でwebページを作ってみたいと思っております。 0から作るのではなく、 Ruby on Rails チュートリアルを全行程終わらせた成果物をブラッシュアップしていく、という形です。 現在、縁あって他の方にUIの体裁を整えていただける事となりまして かなりのページ分のCSSファイル、それを読み込むviewのhtmlを作成していただきました。 ですが、例に漏れず根本的な基礎の部分の理解がないので 「CSSファイルは"/app/assets/stylesheets/"配下に配置すればいいや」という行動原理で動いた後 ``` $ rake assets:precompile ``` を実行するとエラーが発生してしまいました。 念のため?にrails sで直接localhostでブラウザ上で見ても同様のエラーでした。 ### 発生している問題・エラーメッセージ ``` rake aborted! Sass::SyntaxError: Undefined variable: "$small-and-down". /home/www/myspace/myapp/app/assets/stylesheets/_page-edit.scss:8 Tasks: TOP => assets:precompile (See full trace by running task with --trace) ``` と出てしまいます。 未定義の変数があるよ!って事でしょうか。 cssに疎く、そもそも$small-and-down というものが変数なのかも分かりません... ### 該当のソースコード 質問する立場で申し訳ないのですが コードの補足のリクエストを頂いた際も 作成者に敬意を払うためにある程度コードを隠させていただきます...すみません。 (隠してもあまり意味ないかも知れないですが...) ``` @charset "UTF-8"; .page-edit { main { padding-bottom: ○○px; @media #{$small-and-down} { padding-bottom: ○○px; } . . . 以下略 ``` ### 試したこと エラーメッセージで色々検索しました... application.cssをapplication.scssにリネームしろだとか .cssファイルを全部.scssファイルにしろだとか 大体stackoverflowで翻訳された日本語とにらめっこして 一応試してみましたが変わらず... 問題の"_page-edit.scss"だけ削除してみても 新たに"_page-message.scss"が同様のエラーを吐いたり...(中身が似てるので当たり前なんですけど) application.cssの冒頭に [@import "_page-edit"] を記述すると、エラーは吐かなくなりますがCSS全てを読み込まなくなったり... 既存のアプリに作成形式がやや違う(普通のhtmlやphpのような?認識も曖昧です...)コードを導入する、というのが とてもハードルが高く、何が分からないかも分からない状況となっております... ### 謝辞 問題解決にあたり、何か必要な情報などありましたら遠慮なくお申し付けください。随時追加させていただきます! 長文になりましたが、ここまで目を通していただき誠にありがとうございました。 何卒、お力添えをよろしくお願い申し上げます。
回答: まさしく当該 scss の8行目に ``` @media #{$small-and-down} { ``` と出てきていますね。 そもそも @media はメディアタイプ(出力対象)によって適用を変化させるためのものです。 以下のようにメディアタイプ(CSS Level2 以降で規定あり)を指定しなくてはなりません。 ``` @media all {...} // 全デバイス共通 @media braille {...} // 点字用(触覚フィードバックデバイス) @media embossed {...} // 点字プリンタ用 @media handheld {...} // 携帯端末用 @media print {...} // プリンタおよび印刷プレビュー用 @media projection {...} // プロジェクターなどのプレゼンテーション映写用 @media screen {...} // 一般的なコンピュータ画面 @media speech {...} // 音声合成デバイス用 @media tty {...} // テレタイプ端末など @media tv {...} // テレビ ``` もうお分かりですね。メディアタイプとして #{$small-and-down} なんてのは不適当です。 メディアタイプ名としては #,{,$ などを含むことはできないので、文法エラーとなります。 ※上に書いたもの以外でメディアタイプ名としての規則に沿う場合(例えば vr とか)は、それは「存在しないかのように扱われ無視される」ことになっています。