为twitter bootstrap添加所有选择器的前缀为less

Question

我想开始学习Twitter Bootstrap并将其合并到我的网站(从表单元素开始),但如果按原样包含它,它会打破网站的其余部分.

我想为所有选择器添加前缀,以便我可以逐步添加像bootstrap样式的内容: <div class="bootstrap"><!-- bootstrap styled stuff here --></div>

因为我才开始学习,所以我真的不知道有什么可能less.我已经手动完成了选择器前缀,但我很好奇是否有办法做到这一点,less这样我就可以通过修改bootstrap来学习它,同时仍然将它隔离在一个必需的bootstrap容器中.

现在,我必须在编译less文件后的第二步添加前缀.

谢谢你的任何建议!

Answer 1

为了避免periklis的答案中提到的问题:创建自己的prefixed-bootstrap.less,重新编译汇编 bootstrap.css的:

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

sed那时不需要命令.Lars Nielsen的答案中提到的观察结果当然仍然有效.

Answer 2

您可以编辑bootstrap.less文件并将所有内容封装在以下内容中:

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

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

    [...]

}

更新:

由于bootstrap文件使用较少的&运算符,例如:

// 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;
}

为了解决这个问题,请使用以下命令编译bootstrap:

$ 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;
}

Answer 3

这并没有真正解决命名冲突的问题.它在所有引导CSS类之前将特定类作为选择器.因此,要使用它们,您必须将HTML包装在具有该特定名称的类的容器(如DIV)中,然后引导CSS将仅应用于该DIV内部.这有一些问题.

一个问题是Bootstrap CSS包含BODY和HTML的定义,如果将选择器放在它们前面将无法应用.

另一个问题是,在您的自定义CSS中,您定义一些类型为".dropdown"或".table"的Bootstrap类.您可以定义未由Bootstrap定义的样式方面,您可以覆盖Bootstrap样式或将其弄乱.例如,如果Bootstrap在".table"类上定义了填充,并且您在自己的".table"类上定义了边距,那么它们将在呈现页面时根据CSS优先级规则进行组合.即使你在Bootstrap的".table"类前放置一个特定的自定义选择器类,在你自己的".table"类前放置一个不同的选择器类,它们仍然会组合和交互.

使用像这样的选择器类并不是真正意义上的"命名空间",并且不能完全隔离CSS.实现真正隔离的最佳方法是为每个类名添加唯一的前缀字符串.