18

CSS を効率的に編集することは事実上不可能であるため、Foundation4 の Sass バージョンを使用することにしました。

ここの指示に従いました: http://foundation.zurb.com/docs/sass.html

これらは、gemをインストールして（問題ありません）、compassをインストールしてから、wwwrootで行ったプロジェクトを作成するようにアドバイスしました。

これまでのところすべて順調です。次に、「Github からファイルをダウンロードし (scss/ および js/ ディレクトリを取得)、それらをプロジェクト ディレクトリに配置する」ようにアドバイスします。

コマンド ラインの前のステップ (compass create -r zurb-foundation --usingfoundation) で既に私のルート ディレクトリにフォルダーが作成されているのに、なぜ自転車に乗った魚の名前で指示がこれを行うようにアドバイスするのでしょうか。プロジェクト-名前は異なりますが-同一ではないにしても同様のファイルを含むプロジェクトですか? 「foundation」サブフォルダーと「vendor」サブフォルダーを含む「javascripts」フォルダーが既にありますが、ほとんど同じファイルが含まれていますが、サイズが異なるものもあります。

何か不足していますか？含まれている「index.html」ファイルは「javascripts」フォルダーを参照しているのに、なぜ github から「js」を含めるつもりなのですか? テクノロジーに慣れていない場合、これは非常に混乱します。

インストール手順に従った後、「foundation.scss」ファイルと「app.scss」ファイルができました。これらのファイルは、1 つ (app.scss) を除いてほとんど同じように見えますが、多くはコメントアウトされています。どちらを使用するつもりですか?

指示は基本的に古くなっているように私には思えます。github の「js」は必要ないようですが、「scss」は必要です。この scss フォルダーの内容は、プロジェクトが作成されたときに作成される「sass」フォルダーに移動する必要があるように見え、「foundation.scss」ファイルは「app.scss」がそのコピーであるため削除できます。

プロジェクトのインストール/作成時に作成された「foundation」フォルダーがないため、ベース「app.scss」ファイルが「@importfoundation」を望んでいる場所がわかりません。多分私は何かが欠けているかもしれませんが、それはすべて非常に混乱しています. 何から始める必要があるのか​​、何を削除/無視できるのかを明確にしてもらえますか?

4

2 に答える 2

11

をインストールするとgem、すべての適切な Foundation ファイルが gem キャッシュにインストールされます。Compass は、@import ディレクティブを使用して、すべての F4 SCSS ファイルをプロジェクトに取り込みますfoundation.scss。

Github リポジトリのプロジェクト ドキュメントには、F4 プロジェクトをビルドするため の最新のCompass手順が示されています。https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

スタンドアロンの命令をコンパスの命令に混ぜているようです。

これを実行した場合：

[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation

Github や Standalone の手順は必要ありません。

以下の手順は、F4 プロジェクトを手動でビルドする手順の概要を示しています。STEP 4で行き詰まっていると思いますので、その部分に集中してください。

ステップ1：

次の 2 つのアーカイブに簡単にアクセスできるようにダウンロードします。

ファンデーション バニラ:

http://foundation.zurb.com/files/foundation-4.1.6.zip

財団マスター:

https://github.com/zurb/foundation/archive/master.zip

CDあなたのwwwルートディレクトリに：

ステップ2：

このファイルを作成します。

/config.rb

require 'zurb-foundation'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true

Switchoutput_style = :compact or :compressedおよび本番line_comments = false用(ライブに移行する場合)。

ステップ 3:

  • Foundation Vanillaindex.htmlからルート www ディレクトリにコピー/移動します。
  • style タグ内を編集line 11して変更foundation.cssします。app.css

ステップ 4:

次のディレクトリとファイルを作成します。

/scss/

  • 作成app.scss- これはサイト/アプリのスタイルシートで、Normalize と F4 をインポートします。

  • これをそれにコピーします：

    // Global Foundation Settings
// @import "settings";

// Comment out this import if you don't want to use normalize
@import "normalize";

// Comment out this import if you are customizing you imports below
@import "foundation";

// Your own SCSS here...

一部の F4 SaSS 変数をオーバーライドする場合は、このファイルが必要になり_settings.scssます。ここでは、F4 に慣れるまで、この手順をスキップしてコメントアウトしたままにします。

ステップ 5:

このディレクトリを作成します (ファイルはここに自動的に書き込まれます):

/css/

  • app.css/scss/app.scss-コンパスによってここに書き込まれます。正規化すると、すべての F4 CSS と、追加した独自の CSS がその中に含まれます。

これは自動的に行われます。必要な gem をインストールし、 STEP 2から Compass 構成ファイルを作成する以外は何もする必要はありません。

ステップ 6:

このディレクトリを作成し、これらのファイルをそこにコピー/移動します。

/js/

  • Foundation Vanillaダウンロード/js/foundation.min.jsからのコピー/移動はこちらから。

  • 独自の作成/配置が必要な場合は、ここに配置し、フッターapp.jsの最後にリンクしてください。

/js/ベンダー/

  • Foundation Vanillaダウンロードからここに/js/vendor/custom.modernizr.jsコピー/移動します。

  • コピー/移動/js/vendor/zepto.jsし/js/vendor/jquery.js、Foundation Vanillaからここからダウンロードします。

後で、より快適になったら、Foundation Masterから個々の Foundation JS ファイルを選択して、ここでfoundation.min.js.

それはそれを行う必要があります。

F4 セットアップが機能していることを示しているので、 私のwwwリポジトリでこのファイルをチェックしてください。

また、 Grunt.jsを統合して SCSS と JS を連結と縮小化で自動ビルドする 方法についても調べてみてください。

于 2013-05-27T17:53:38.283 に答える