前缀为Twitter的引导所有的选择中少前缀为Twitter的引导所有的选择中少(Prefixing

我想开始学习Twitter的引导，并将其合并到我的网站（与表单元素开始），但如果我把它作为是它打破了网站的其余部分。

我想前缀的所有的选择，这样我可以逐渐添加程序的引导风格，像这样的内容： <div class="bootstrap"></div>

因为我才刚刚开始学习，我真的不知道什么是可能的less 。我已经手动完成选择前缀，但我很好奇，如果有将是一个与方式做到这一点less ，这样我可以通过修改引导，同时仍然在必需的引导容器隔离它学习它。

现在，我必须在编制少的文件之后，在第二步骤中添加前缀。

感谢您的任何建议！

Answer 1:

您可以编辑该文件bootstrap.less并封装在这样的一切：

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

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

    [...]

}

更新：

由于引导文件使用了更少的与运营商，如：

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

Answer 2:

为了避免periklis的回答中提到的问题：创建自己的prefixed-bootstrap.less是重新编译编译 bootstrap.css在：

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

无需sed然后命令。在拉斯尼尔森的回答中提到的意见当然是仍然有效。

Answer 3:

这并没有真正解决命名冲突的问题。它把一个特定的类，因为所有的引导CSS类前一个选择。因此，要使用它们，必须与一类特定名称的包装容器（如DIV）内的HTML，然后引导CSS将只应用于该DIV内。有一些问题，与此有关。

一个问题是，在引导CSS包含了身体和HTML定义，这将失败，如果你在他们面前放一个选择器应用。

另一个问题是，当，在您的自定义CSS，可以定义一些风格的引导类像“.dropdown”或“表”。您可以定义不受引导定义的样式的方面，你可能要么重写引导样式或混乱起来。例如，如果引导定义了“表”类中的填充，可以定义你自己“表”类中的保证金，那么他们将根据CSS的优先级规则时，页面呈现相结合。即使你把引导的“表”级的前一个特定的自定义选择器类，以及不同的选择器类在你自己“表”全班同学面前，他们仍然会结合和互动。

使用选择器类这样是不是真的在真正意义上的“命名空间”，并没有完全隔离的CSS。实现真正意义上的隔离，最好的办法是唯一的前缀字符串前缀的每一个类名。

文章来源: Prefixing all selectors for twitter bootstrap in less