6

少ないファイルで Twitter Bootstrap を試すためだけに、ランディング ページをコーディングしました。少ないファイルを適切に整理したかどうかはわかりません。

私の index.html の head セクションで:

<link rel="stylesheet/less" type="text/css" href="bootstrap.less" />

ここに私のbootstrap.lessの内容があります

// Core variables and mixins
@import "less/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "less/mixins.less";

// CSS Reset
@import "less/reset.less";

// Grid system and page structure
@import "less/scaffolding.less";
@import "less/grid.less";
@import "less/layouts.less";

// Base CSS
@import "less/type.less";

// Utility classes
@import "less/utilities.less"; // Has to be last to override when necessary

私のフォルダー「less」には、次のファイルがあります

  • ユーティリティ.レス
  • ユーティリティ.css
  • 変数なし
  • 変数.css
  • グリッドレス
  • grid.css
  • type.less
  • レイアウト.レス
  • mixins.less
  • 足場なし
  • リセットレス

ランディング ページを機能させるにはこれらすべてが実際に必要ですが、このファイル構成が最適なソリューションであるかどうかはわかりません。私はそれについて少し混乱しています。私を助けて、私がうまくやっているかどうか教えてもらえますか? ファイルを整理するためのより良い方法はありますか?

ここにランディングページが表示されます

4

1 に答える 1

8

ファイルをどのように整理するかは完全にあなた次第ですが、開発中に私が通常行う方法は次のとおりです。

public/
    css/
        layout.css  (compiled from main.less)
        less/
            main.less  (imports bootstrap/bootstrap.less)
            bootstrap/
                bootstrap.less
                ...etc...

通常、main.less は blog.less、forum.less などのファイルもインポートします (サイトのコンテンツによって異なります)。このスキーマを使用すると、HTML に layout.css を含め、ウォッチャーを使用して、または必要に応じて lesscss をコンパイルできます。

于 2013-01-10T17:22:53.687 に答える