用更少的前缀为twitter引导程序添加所有选择器 [英] Prefixing all selectors for twitter bootstrap in less

问题描述

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

I'd like to start learning Twitter Bootstrap and merging it into my site (starting with the form elements) but it breaks the rest of the site if I include it as is.

我想为所有选择器添加前缀，以便逐步添加具有自举程序风格的内容，如下所示:<div class="bootstrap"><!-- bootstrap styled stuff here --></div>

I'd like to prefix all of the selectors so that I can gradually add content that's bootstrap-styled like so: <div class="bootstrap"><!-- bootstrap styled stuff here --></div>

因为我才刚刚开始学习，所以我真的不知道less有什么可能.我已经手动完成了选择器前缀，但是我很好奇是否可以通过less做到这一点，以便我可以通过修改引导程序来学习它，同时仍将其隔离在所需的引导程序容器中.

Because I'm only starting to learn, I don't really know what's possible with less. I have manually done the selector prefix but I'm curious if there would be a way to do this with less so that I can learn it by modifying bootstrap while still isolating it in a required bootstrap container.

现在，我必须在编译较少的文件之后的第二步中添加前缀.

For now, I have to add prefix in a second step after compiling the less files.

谢谢您的建议！

推荐答案

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

You can edit the file bootstrap.less and encapsulate everything in something like this:

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

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

    [...]

}

更新:

由于引导程序文件使用的是&运算符，例如:

Since bootstrap files uses the less & operator, e.g:

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

以上代码的编译将以语义错误并且没有以.bootstrap为前缀的规则结束:

The compilation of the above code will end up with rules that are semantically wrong and aren't prefixed with .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;
}

为了解决该问题，请使用以下命令编译引导程序:

In order to fix that use the following to compile bootstrap:

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

现在上述行将被编译为:

Now the above lines will be compiled to:

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

这篇关于用更少的前缀为twitter引导程序添加所有选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！