6

Twitter Bootstrap の学習を開始し、(フォーム要素から始めて) 自分のサイトにマージしたいのですが、そのまま含めると、サイトの残りの部分が壊れてしまいます。

次のように、ブートストラップ スタイルのコンテンツを徐々に追加できるように、すべてのセレクターにプレフィックスを付けたいと思います。<div class="bootstrap"><!-- bootstrap styled stuff here --></div>

学び始めたばかりなので、 で何ができるのかよくわかりませんless。less手動でセレクター プレフィックスを作成しましたが、必要なブートストラップ コンテナーに分離しながらブートストラップを変更することで学習できるように、これを行う方法があるかどうかに興味があります。

今のところ、少ないファイルをコンパイルした後、2 番目のステップでプレフィックスを追加する必要があります。

ご提案ありがとうございます。

4

3 に答える 3

20

periklis の回答に記載されている問題を回避するには: でコンパイルされたものを再コンパイルする独自のものを作成しますprefixed-bootstrap.less。 bootstrap.css

.bootstrap {
  @import (less) 'dist/css/bootstrap.css';
  @import (less) 'dist/css/bootstrap-theme.css'; /* optional */
}

sedその場合、コマンドは必要ありません。Lars Nielsenの回答で言及されている観察は、もちろんまだ有効です。

于 2013-11-06T13:04:33.803 に答える
15

bootstrap.lessファイルを編集して、すべてを次のようにカプセル化できます。

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

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

    [...]

}

アップデート：

ブートストラップファイルはless＆演算子を使用するため、例：

// list-group.less (bootstrap 3.0.0)
.list-group-item {
    [...]
    a& {
        [...]
    }
}

上記のコードをコンパイルすると、意味的に間違ったルールになり、プレフィックスが.bootstrapになりません。

a.bootstrap .list-group-item {
  color: #555555;
}
a.bootstrap .list-group-item .list-group-item-heading {
  color: #333333;
}
a.bootstrap .list-group-item:hover,
a.bootstrap .list-group-item:focus {
  text-decoration: none;
  background-color: #ecf0f1;
}

これを修正するには、以下を使用してブートストラップをコンパイルします。

$ lessc bootstrap.less | sed -e 's/\(.\+\).bootstrap \(.\+\)/.bootstrap \1\2/g' > output.css

これで、上記の行は次のようにコンパイルされます。

.bootstrap a .list-group-item {
  color: #555555;
}
.bootstrap a .list-group-item .list-group-item-heading {
  color: #333333;
}
.bootstrap a .list-group-item:hover,
.bootstrap a .list-group-item:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}
于 2012-06-22T07:29:07.560 に答える