Bootstrap 3.0＆LESS1.5を使用しています。多くのサイトで同じbootstrap.cssを使用します（またはCDNを使用します）。だから私は使っています
@import (reference) "bootstrap-3.0.0/less/bootstrap.less";
@import (reference) "bootstrap-3.0.0/less/mixins.less";
参照としてのみインポートします。
私のapp.lessは（とりわけ）
.herocontainer{
.make-row();
.iphoneblock{
.make-sm-column-offset(1);
.make-sm-column(4);
text-align: center;
}
.copyblock{
.make-sm-column(5);
text-align: center;
.copytext{
@media(min-width: @screen-sm) {
padding-top: 100px;
}
}
.buybutton{
.btn-lg;
.btn-primary;
background-color: #d6822f;
}
}
}
結果のサイトは、単一列の出力です。しかし、ミックスインから（参照）を削除すると、次のようになります。
@import (reference) "bootstrap-3.0.0/less/mixins.less";
次に、2列のレスポンシブ出力を取得しますが、結果のcssにも不要なクラスが含まれています。
したがって、a）app.lessで記述し、ブートストラップクラスで肥大化していないクラスのみをcssで取得するにはどうすればよいですか？b）そのようなcssの問題をデバッグするにはどうすればよいですか？（私はGoogle Chromeツールを使用していますが、この問題は私が理解/デバッグできる以上のものです）
ありがとう、
ジョセフ
https://stackoverflow.com/a/14463540/1596547も参照してください。それは言う：
実際のコードはそのファイルからCSSとして出力されませんが、すべてがミックスインとして使用できるようになります。
あなたの場合、それらは、例えばmake-sm-column()このミックスインがメディアクエリ定義を含んでいることとの違いになります。(reference)mixins.lessをインポートするときに使用する場合、このメディアクエリ部分はCSSに含まれません。
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
あげる：
.herocontainer {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.herocontainer {
float: left;
width: 33.33333333333333%;
}
}
使用(reference)すると、次のものだけが得られます。
.herocontainer {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
で使用btn-lgすることに注意してください。buttons.lessから来ました。私にとっては、button.lessを参照するのが最善の解決策のようですが、mixins.lessは参照しないでください（理論上のミックスインにはミックスインのみを含める必要があるため、参照することで違いが生じるはずです）。それ以外の場合は、必要なミックスインのみを使用してmixins.lessを作成します。
更新
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加