web-dev-qa-db-ja.com

SASSグローバル変数がパーシャルに渡されない

基本的に、3.0.xで完全に機能していた構造がありますが、現在はundefined variableエラーで壊れています。

  • パーシャル
    • _base.css.sass
    • _header.css.sass
  • main.css.sass
  • application.css.sass

application.css.sass：

//=require 'main'

main.css.sass：

@import 'partials/base'
@import 'partials/header'

かなり単純なもの。

_header.css.sassで定義された変数を使用しているため、_base.css.sassでエラーが発生します

以前はこのエラーは発生していませんでしたが、_base.css.sassをインポートするのと同じコンテキストで、これらの変数を_header.css.sassにインポートしているため、意味がありません。

すべてのパーシャルにも_base.css.sassをインポートする必要がありますか？必要な独自のパーシャルで使用できない場合、グローバル変数を必要とするmain.css.sassのポイントは何ですか？

私の構造が完全に間違っている場合は、別の方法を教えてください。提案をお願いします。

ruby-on-rails-3sassassets
25
Draiken

//=requireを使用して、ミックスインや変数などの「動的」SASSのものを含めることはできません。これは、最も「静的」なもの（純粋なCSSなど）を含めるためだけに使用されるためです。 @import内のすべてのファイルをapplication.css.sassする必要があります。 Railscastsは、これについて episode＃268 で適切に説明しています。

26
muhal

元のトピックには簡単な解決策があります。アプリケーションとメインのcssファイルはscssファイルである必要があります。つまり、既知の構文を使用できます。

/*
 *= require_self
 *= require main
 */

Main.scssでは、次のようにパーシャルをインポートできます。

@import 'partials/base'
@import 'partials/header'

これらのファイルはsassファイルであり、SASSの素晴らしさから恩恵を受けることができます;-)

2
awenkhh

私も同じ問題を抱えていたと思います。助けになったのは、@ importsの前に変数を宣言することでした。これが誰かに役立つことを願っています=）。

2
Joonas Ahola

どうやら、マニフェストとしてapplication.css.sassを使用する必要があります。そうしないと、何も機能しません。

基本的にすべてを分離できますが、スコープが共有されていないため、アプリケーションファイルから呼び出す必要があります。

あなたが私に尋ねるなら、少し強すぎる...

1
Draiken

それはsassファイルです。 requireの代わりに@importでapplication.css.sassを使用します。 requireは、インポートシステムを持たないプレーンなCSSまたはテンプレートエンジン用です。

0
chriseppstein