1

Meteor (nodejs) プロジェクトでは、less CSS プリプロセッサを使用し、CSS スタイル設定にサード パーティの「bootstrap-full.less」を使用します。

ブートストラップには、他のルールを条件付きでオーバーライドするため、核にしたい CSS ルールが 1 つ (おそらくそれ以上) あります。(詳細は下記)

ただし、元のブートストラップ ファイルを「ハッキング」したくありません。これは「ベンダー コード」が原因です。

CSS ルールを再オーバーライドできることはわかっていますが、これはより多くの作業と手間がかかります。

質問は次のとおり
です。実際のcssが生成される前に、解析されたcssルールをより少なく操作/処理することは可能ですか?

特に、ここにはこのルールがあります。

@media (max-width: 767px) {
  ...
  // Make all grid-sized elements block level again
  [class*="span"],
  .row-fluid [class*="span"] {
    float: none;
    display: block;
    width: auto;
    margin-left: 0;
  }

これは、モバイルでも同じ幅を維持するサイドバーにしかないため、私の場合は望ましくありません。そのため、セル (span1、span2 など) がフロートされているテーブルのように動作し続ける必要があります。

わかりました、CSS/ブートストラップの問題の別の解決策を見つけるかもしれませんが、それが生成する css を操作できるかどうかを知ることは興味深いでしょう。

4

1 に答える 1

1

私のプロジェクトで私が行ったことは、マスター.lessファイルを作成し、そのファイル内にサードパーティのファイルをインポートしてから、カスタムファイルをフォローすることです。更新したいクラスがある場合は、そのクラスを含む dupe.lessファイルを自分のディレクトリに作成し、ファイルで変更したいプロパティを編集するだけです。たとえば、次のようになります。

マスターレス

@import "/static/bootstrap/less/bootstrap.less";

// My custom files

@import "scaffolding.less";
@import "type.less";

そして、あなたはあなた自身のファイルを持っています

type.less

h6{
    color: @myCustomColor;
}

このようにして、すべてのブートストラップ ファイルをそのまま保持し、必要なものだけを上書きします。また、ファイルが適切に分離されているため、ナビゲートが簡単で、ブートストラップ ソースを更新する必要がある場合にも簡単にアクセスできます。

于 2012-12-15T04:25:13.547 に答える