0

LESS（.js）でグリッドフレームワーク（例：blueprint / 960.gs / ...）を使用したいのですが、そのようにすることにした場合、いくつかの問題があるようです。

たとえば、ブループリントの場合：ミックスインクラスがhtml要素に表示されない場合、iehacksスタイルシートはcontainer/span-Xクラスをミックスインとして使用できません。たとえば置く

#content { .container; }

.lessスタイルシートでは、つまりハックは適用されません（そしてそれは理にかなっています）。

だから私は誰かがすでに青写真または960gsをより少ないcssに「移植」したのだろうかと思っていましたか？私はグーグルを調べましたが、何も見つかりませんでした（私は自分で試しましたが、使用されているIE hacks / cssセレクターを考えると、変換は簡単ではありません）。

PS：別の質問はSOでも同様ですが、作成者は自分でフレームワークを開始することにしました。「人気のある」フレームワークを使用したいと思います。

編集：少ないファイル（ミックスイン）からクラスを適用するときの問題の例：960.gsには次のルールがあります：

.container_12 .grid_3{
    width:220px;
}

html（簡略化）：

<div id="main">
  <div id="col1">
  </div>
  <div id="col2">
  </div>
</div>

LESSを使用すると、次のようにスタイルシートでレイアウトを定義すると便利です。

#main{
  .container_12
}

#col1 {
  .alpha;
  .grid_3;
}

#col2 {
  .omega;
  .grid_9;
}

しかし、それは機能しません（ルールはcol1とcol2には適用されません）。LESSには＃col1が#mainにあることについての手がかりがないためです（セレクター#main＃col1はトリックを実行しません、それはLESSの点からかなり複雑です見る）

4

4 に答える 4

0

{less}でLessFrameworkを使用するのが好きです。人々を極端に混乱させるだけです...

于 2011-05-20T19:09:47.930 に答える
0

#mainに＃col1と＃col2をネストすることはできませんか？

#main {
   #col1 {.alpha; .grid_3;}
   #col2 {.omega; .grid_3;}
}

出力を与える必要があります#main #col1 {rendered CSS code}

于 2011-03-13T22:42:25.193 に答える
0

私はLESSでブループリントを使用していますが、それは美しく機能します。あなたがする必要がある唯一のことはです。HTMLで、ベースにが含まれていることを確認してdivくださいclass="container"。これを行うだけで、残りはグリッチなしで機能します。

screen.cssの名前をscreen.lessに変更します

@import "screen.less";
#header {     
    .span-24; .last; // Now, Have Fun! :D
         }
于 2011-06-14T16:27:54.073 に答える
0

2012年7月13日編集：TwitterBootstrapは私の新しいお気に入りの選択肢です。

編集：非常に見栄えのする別のもの：http ：//semantic.gs/

まだテストしていませんが、http： //centage.peruste.net/はLESS.jsのcssフレームワークです。

于 2011-12-14T11:22:23.393 に答える