4

I'm working with Bootstrap using LESS, I'm new to LESS, so I have question.

For example, I want to add padding property to body.

body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
}

In bootstrap.less I made this:

@import "bootstrap/scaffolding.less";
body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
  padding: 50px;
}

But in compiled CSS files I have two body classes, one is original and then my own. How to add property to a class without duplication? Thank you.

4

1 に答える 1

5

前にコメントしたように、ブートストラップの少ないファイルを変更せず、代わりにブートストラップをオーバーライドするスタイルシート/少ないファイルにスタイルを追加することがベストプラクティスと見なされます。このようにして、新しいバージョンのブートストラップにアップグレードする際の問題を回避できます。エラーを追跡する必要がある場合は、オーバーライドを確認するだけで非常に簡単になります。

ここで、オーバーライドに関連する問題が発生する可能性があります。また、適用したスタイルがブートストラップのスタイルをオーバーライドしない理由を理解しようとしています。その場合は、Andy Clarkeのすばらしい記事-CSS：Specificity Wars（少し古いですが、cssの特異性についてのすばらしい説明）を読むことをお勧めします。

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

編集-複数のクラスブロックの利点をよりよく説明するために、最初に2つのクラスを使用して1つの要素のスタイルを設定する例を示します。

CSS：

.center {
   margin: 0 auto;
}
img.center {
   display: block;
}

HTML

<div class="center">This will center horizontally</div>
<img class="center" src="foo.png"><!-- this image will also center horizontally -->

上記の例では、両方のルールを継承するため、画像は中央に配置されます。ここで、ネストされたulのパディングの量を通常の（親）ulよりも少なくしたい場合は、その階層をターゲットにしてこれをオーバーライドします（上記のリンクで説明されています）

ul {
    list-style: none;
    padding: 5px;
}

ul ul {
    padding: 1px;
}

編集、@ChrisMoschiniコメントへの回答

はい、bootstrap.lessをインポートする独自のlessファイルを作成し、変更する変数をオーバーライドする場合は、LESSを介してBootstrapのデフォルト値をオーバーライドすることもできます。

@import "less/bootstrap.less";
@brand-primary: red;

オーバーライドできるものを確認するには、gitのファイルvariables.lessを確認してください。また、周りを混乱させたい場合は、mixins.lessファイルをチェックアウトすることもできます。

ただし、多くの場合、cssの特異性をオーバーライドする必要があります。

于 2013-02-24T15:33:40.540 に答える