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

Question

###前提・実現したいこと
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のような?認識も曖昧です…)コードを導入する、というのが
とてもハードルが高く、何が分からないかも分からない状況となっております…
###謝辞
問題解決にあたり、何か必要な情報などありましたら遠慮なくお申し付けください。随時追加させていただきます！
長文になりましたが、ここまで目を通していただき誠にありがとうございました。
何卒、お力添えをよろしくお願い申し上げます。

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

Comments

[hikaru923]

ご指摘ありがとうございます！
メディアタイプが不適当、というアドバイスを元に
この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はダメですね…一括で読み込みなどの楽ちん機能を
本当に基礎的な理解がないまま使ってしまっていたので…反省です。
何が起きているのか理解するように努めます。