2

私はこれをググって検索し、もちろん関連するドキュメントを調べましたが、Sass の変換方法に関連して、Foundation 4 について理解できないことがいくつかあります。

create project コマンドを使用して Compass で Foundation をセットアップしたので、Sass が実行されています。app.scss ファイルは「settings」と「foundation」をインポートし、「watch」でコンパイルされています。

私の質問の前半: app.css が gem のコンポーネント ファイルからコンパイルされていることは理解していますが (その文は意味がありますか?)、これらのコンポーネントはどこにありますか? たとえば、「foundation/components/global」はどこにありますか?

私の質問の後半: app.scss で宣言された変数のように// $body-bg: #fff;: Sass はこの変数が CSS で何に関連しているかをどのように認識しますか たとえば、に割り当てられている場所が見つかりませんbody {background}。また、(私の例のように) コメントアウトされている場合、Sass は上記の変数をどのようにインポートしますか? _settings.scss 内のほぼすべての変数がコメント化されています。

私はこれを手に入れるために何日も費やしましたが、本当に明らかなばかげたことを見逃しているように感じますが、ラップトップを窓から投げ捨てたいと思っています:(

4

1 に答える 1

2

Compass と共に使用する Foundation は、 Compass Extensionと呼ばれるものです(詳細については、拡張機能を参照してください)。これは基本的に、ファイルをコピーしなくてもプロジェクトで使用できるようにする方法でバンドルされた Sass および Ruby ファイルのコレクションです。

config.rb には、次のようなものがあるかもしれません:

require 'foundation'

これにより、拡張機能がプロジェクトで使用できるようになります。この時点で利用できるのは、Ruby で記述された Sass 関数だけです。Sass ファイル (ミックスイン、テーマなど) を取り込むには、次のようにインポートする必要があります。

@import 'foundation';

拡張機能が推奨される命名規則とディレクトリ構造を使用すると仮定すると、拡張機能から _foundation.scss という名前のファイルが含まれます。これは通常、拡張機能内にある他のファイルの束をインポートします。Foundation のマスター インポート ファイルは次のようになります: https://github.com/zurb/foundation/blob/master/scss/foundation.scss

どの変数がどのように使用されているかの詳細は、ソースを見て発見することができます: https://github.com/zurb/foundation

拡張機能の変数には通常、デフォルト値が設定されています。設定ファイルは、これらの値を上書きするオプションを提供しており、典型的な構成ファイル スタイルで記述されています (つまり、デフォルト値がリストされていますが、コメント アウトされています)。

于 2013-05-05T21:43:02.723 に答える