我正在使用LESS使用Bootstrap 2.0.3.我想广泛地自定义它,但我想尽可能避免对源进行更改,因为库的更改经常发生.我是LESS的新手,所以我不知道它的编译是如何完全有效的.使用基于LESS或LESS的框架有哪些最佳实践?
例如,如果我有以下HTML:
<div class="someDiv"></div>
Run Code Online (Sandbox Code Playgroud)
这个CSS:
.opacity {
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.radius {
border-top-left-radius: 15px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
}
.someDiv {
background: #000; height: 50px; width: 200px;
/*** How can I reference the opacity and radius classes here
so this div has those generic rules applied to it as well ***/
}
Run Code Online (Sandbox Code Playgroud)
就像在脚本语言中一样,你拥有通常在脚本顶部编写的泛型函数,每次你需要使用该函数时,你只需调用函数而不是每次都重复所有代码.
我正在使用Bootstrap 3.0和LESS 1.5.我将为许多站点使用相同的bootstrap.css(或使用他们的CDN).所以我正在使用
@import (reference) "bootstrap-3.0.0/less/bootstrap.less";
@import (reference) "bootstrap-3.0.0/less/mixins.less";
Run Code Online (Sandbox Code Playgroud)
仅作为参考导入.
我的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;
}
}
}
Run Code Online (Sandbox Code Playgroud)
生成的站点只是单列输出.但是,如果我从mixins中删除(引用),例如:
@import (reference) "bootstrap-3.0.0/less/mixins.less";
Run Code Online (Sandbox Code Playgroud)
然后我得到一个两列响应输出,但生成的CSS也有我不需要的类.
那么,a)我如何才能在css中获取我在app.less中编写的类而不是使用bootstrap类膨胀b)如何调试这样的css问题?(我确实使用Google Chrome工具,但这个问题比我能理解/调试的要多)
谢谢你,
约瑟夫