3

Foundation をインストールして動作させていますが、同じプロジェクト内で Compass CSS3 ミックスインを使用しようとしていますが、それらを含める方法がわかりません。

Foundation をセットアップする前に入力したため、compass は既にインストールされていると思いまし gem install compassたcompass watch。すべての Foundation ミックスインは、Compass を使用して SCSS をコンパイルするようです。

新しいコンパス プロジェクトを作成し、SCSS ファイルをマージしてから、以下を追加しようとしました。

@import "compass/css3"

これらの mixon にアクセスするには、コマンド ラインで何を実行するか、ファイルに追加する必要があるかについてのヘルプをいただければ幸いです。

4

2 に答える 2

5

Foundation 4 の sass/compass バージョンを使用していて、次を使用してプロジェクトを作成した場合

compass create myproject -r zurb-foundation --using foundation

次に、ファイルの先頭に を追加@import "compass/css3"します。stylesheets/app.scss

これにより、次のようなcss3 mixinをファイルで使用できます。

.myclass {
  @include border-radius(12);
}

新しい css が生成されるように変更を行った後、プロジェクト ディレクトリで実行compass watchまたは実行する必要があります。compass compile

@importライブラリをロードしており@include、クラス内で css を生成するメソッドです。

アップデート：

変更されたapp.scssファイル (切り捨てられた) を表示しているので、どのように変更したかがわかります。

// 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";

// Import Compass CSS3 Stuff
@import "compass/css3";

// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

// @import "foundation/components/global"; // *always required
// ...
// @import "foundation/components/dropdown";

.myclass {
  @include border-radius(12);
}

で次のように生成されますstylesheets/app.css。

/* line 52, ../sass/app.scss */
.myclass {
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  -ms-border-radius: 12;
  -o-border-radius: 12;
  border-radius: 12;
}
于 2013-06-08T18:06:00.910 に答える