/ /ファウンデーション5カスタムカスタムプロジェクトセットアップ - zurb-foundation、compass-sass、compass、zurb-foundation-5

Foundation 5カスタム・サス・プロジェクトのセットアップ - zurb-foundation、compass-sass、compass、zurb-foundation-5

私は使用したいプロジェクトがありますファンデーション5。私はCLIを使って新しい基礎プロジェクトを作成する段階を経てきましたが、私はそれが好きではありません。ファイルがたくさんあり、構造が私の望むものと一致しません。

プロジェクトに必要なファイルだけを追加し、すべてのcssをコンパイルするためにコンパスを使用するつもりです。

私は、CLIで作成されたプロジェクトで、私を混乱させるものがいくつかあり、それらをクリアするのに役立つことに気づきました。

  • CLIで作成されたプロジェクトには、2つの _settings.scss bower_componentsの基礎ディレクトリの下に1つ、 MY_PROJECTscss。私はこれのためにそれを仮定しています add_import_path "bower_components/foundation/scss"config.rbこれらのファイルのどれに優先権がありますか?

  • どして MY_PROJECT/stylesheets そこにnormalize.css(またはfoundation.css)がありませんか?そして、彼らはどうやってそこにいませんか? (私のカスタム設定では、それらは生成されていますが、サブディレクトリにはありますが stylesheets、また foundation.css それは私のために生成されている設定変更が適用されていないので、私はそれが生成されるべきではないと思います)

回答:

回答№1は0

あなたが内部を見れば bower_componentsfoundationscss あなたはファイルを見るでしょう foundation.scss。このファイルは、Foundation 5のパッケージに含まれるすべての追加コンポーネントのすべてのスタイルシートをインポートします。あなたのルートに scss ディレクトリ、 app.scss SASSをコンパイルして stylesheetsapp.css。だからこれよりも:

@import "foundation";

あなたが使用する個々のコンポーネントのコメントを外します。次のようなもの:

@import
//"foundation/components/accordion",
//"foundation/components/alert-boxes",
"foundation/components/block-grid",
//"foundation/components/breadcrumbs",
//"foundation/components/button-groups",
//"foundation/components/buttons",
"foundation/components/clearing",
"foundation/components/dropdown",
//"foundation/components/dropdown-buttons",
//"foundation/components/flex-video",
"foundation/components/forms",
"foundation/components/grid",
//"foundation/components/inline-lists",
//"foundation/components/joyride",
//"foundation/components/keystrokes",
//"foundation/components/labels",
//"foundation/components/magellan",
//"foundation/components/orbit",
//"foundation/components/pagination",
//"foundation/components/panels",
//"foundation/components/pricing-tables",
//"foundation/components/progress-bars",
"foundation/components/reveal",
"foundation/components/side-nav",
//"foundation/components/split-buttons",
"foundation/components/sub-nav",
//"foundation/components/switches",
"foundation/components/tables",
//"foundation/components/tabs",
//"foundation/components/thumbs",
//"foundation/components/tooltips",
"foundation/components/top-bar",
"foundation/components/type",
"foundation/components/offcanvas",
"foundation/components/visibility";

ファイル構造を合理化したいのであれば、 bower_componentsfoundationscssfoundationcomponents あなたが使用しないディレクトリ。同じ js ディレクトリ。あなたは実際には何かを変更する必要はありません bower_components ディレクトリを使用してすべてを動作させます。なぜそれがすべての bower_componentsしかし、後のリリースでコアコンポーネントを後で更新できることとは何かが関係していると思います。

他の誰かがおそらくより教育的な答えを与えることができます。

p.s. - 必ず確認してください compass watch CLIでSASSファイルに加えられた変更を確認します。


関連する質問


コメント(0)

コメントを追加