質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

Rails内で.scssファイルをstylesheets内に配置するとSass::SyntaxError

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 4,041

hikaru923

score 27

前提・実現したいこと

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のような?認識も曖昧です…)コードを導入する、というのが
とてもハードルが高く、何が分からないかも分からない状況となっております…

謝辞

問題解決にあたり、何か必要な情報などありましたら遠慮なくお申し付けください。随時追加させていただきます!
長文になりましたが、ここまで目を通していただき誠にありがとうございました。
何卒、お力添えをよろしくお願い申し上げます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

まさしく当該 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 とか)は、それは「存在しないかのように扱われ無視される」ことになっています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/16 11:51

    ご指摘ありがとうございます!
    メディアタイプが不適当、というアドバイスを元に
    このCSSは本職の方に書いていただきましたので
    ミスは無いはず…と思い精査しましたところ
    $small-and-downという変数が定義されているcss内部に直接記述されている
    @import "page-edit.scss"などが上手く読み込めていない事が原因らしいと分かりました。
    Railsだとasset pipelineで一括で読み込んでしまうため、import関係なくscssも読み込まれ
    変数にメディアタイプが定義されないままエラーになる、といった感じでしょうか。
    (完全に理解はしていないため、説明もあやふやですみません…)
    この対策として、ちゃんとcssをコンパイルしよう、ということで
    config/initializers/assets.rbに
    Rails.application.config.assets.precompile += %w( 当該.css )
    と記述し、各種html内で
    <%= stylesheet_link_tag "当該", media: "all","data-turbolinks-track" => true %>
    と各cssを指定して読み込むことで対応しました。
    今までのapplication.cssはダメですね…一括で読み込みなどの楽ちん機能を
    本当に基礎的な理解がないまま使ってしまっていたので…反省です。
    何が起きているのか理解するように努めます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る