3

SASS とブループリントを別々に調査し、それらがどのように機能するかを理解していると思います。compass CLI ツールを使用してプロジェクト ディレクトリを設定しましたが、プロジェクトを整理する正しい方法について途方に暮れています。

プロジェクトを初期化した後

$ compass create my_project --using blueprint/semantic

...HTMLで生成されたCSSファイルをこれらの行にリンクするように言われました

<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />

...しかし、独自のアプリケーション固有のファイルをどこに配置.scssすればよいのでしょうか?また、適切なブループリント ファイルをどのように含める必要がありますか?

print.css生成されたものを HTMLにscreen.css直接含めるべきではなく、代わりに次のようなことを行うべきだと私には思えます。

@import "screen";

body {
    @include container;
}

...そして、HTMLで上記から生成されたファイルのみを使用します。そうでなければ、なぜこのような行をscreen.scss?:

// Import all the default blueprint modules so that we can access their mixins.
@import "blueprint";

HTML でミックスインを使用できません。

私は、ドキュメントが非常に曖昧で矛盾していること、および次の組み合わせを示す短い例を見つけています。

  1. HTML
  2. 上記のコンパス コマンドから生成された SCSS ファイル
  3. サイト固有のスタイルを含む SCSS ファイル

私とおそらく他の人にとって非常に役立つでしょう。

4

1 に答える 1

17

「screen.scss」ファイルと「print.scss」ファイルは魔法のようなものではありません。これらは、HTMLからリンクできる出力に与えられたファイル名の例にすぎませんが、必要はありません。必要に応じて、ファイルを削除して独自のファイルを作成するか、独自のスタイルを追加してください。@mediaこれら2つのファイルの目的は、スタイルの問題を個別に整理することです。「mobile.scss」を追加して、これらすべてをHTMLにリンクするか、ブロックの下の1つのマスターファイルに一緒にインポートできます。

HTMLでミックスインを使用できません。

ミックスインはHTMLには適用されません。これらは、SCSSソースコードを作成するために使用される便利な手法です。コンパイルされたCSS出力またはHTMLはそれらについて何も知りません。Sassを利用するには、ミックスインを使用する必要があります。

SASSとブループリントを別々に調査しました

ブループリントクラスが最初に何をするかを理解することは重要ですが、コンパスを使用する場合、ブループリントのようなフレームワークを適用する方法にはさまざまなアプローチがあります。

1.HTML全体でBlueprintの元の非セマンティッククラス名を使用します

これはベストプラクティスとは見なされませんが、特にワイヤーフレーミング/足場の場合に開始する方法です。

screen.scss 
    @import"ブループリント";

    //これにより、Blueprintのクラスがスタイルシートに出力されます。
    @includeブループリント;

    #sidebar {背景：$ blue; }
    #main {背景：$ yellow; }
screen.css（コンパイル済み） 
    .column {float：...}
    .span-6 {幅：...}
    .span-12 {幅：...}
    / * ...など、Blueprintのすべてのクラス... * /
    #sidebar {背景：#ccf; }
    #main {背景：#ffc; }
index.html 
    <div id = "sidebar" class="columnspan-6">サイドバーのコンテンツ</div>
    <div id = "main" class ="columnspan-12">メインコンテンツ</div>

結果は、Sass/コンパスなしでブループリントを使用した場合と同じです。HTMLにはプレゼンテーションクラスが含まれますが、これは要素で使用するのとそれほど違いはありませんstyle="width:120px"。代わりにクラスを使用して実行されます。

2.ブループリントを独自のセマンティッククラス名へのミックスインとして使用します。

screen.scss 
    @import"ブループリント";
    //ブループリントのクラスをスタイルシートに出力しないでください。
    //代わりに、独自のクラスを作成し、機能をミックスインします。
    #sidebar {
      @extend .column;
      @include span（6）;
      背景：$ blue; }
    ＃主要 {
      @extend .column;
      @include span（12）;
      背景：$ yellow; }
screen.css（コンパイル済み） 
    .column、＃sidebar、＃main {float：左; ...}
    #sidebar {幅：240px; 背景：#ccf; }
    #main {幅：480px; 背景：#ffc; }
index.html 
    <divid="sidebar">サイドバーのコンテンツ</div>
    <divid="main">メインコンテンツ</div>

ご覧のとおり、2番目の方法では、BlueprintのプレゼンテーションロジックをHTMLからスタイルシートに移動します。

@extend（の代わりに）の賢明な使用は@include、共通のスタイルをグループ化できる最適化です。たとえば、「列」であるすべての要素は、セレクターのリストとして一度定義されます。異なる幅のみが各要素に直接含まれます。

于 2011-02-10T18:37:49.853 に答える