Question

Edit: This question has been marked as a duplicate and then linked to two other questions that do not answer my question. My question is "what is the best approach" and the linked to questions are focused on the @extend sass method and absolutely no explanation of how this relates to my question.

我有一个Bootstrap Web应用程序，其中包含一些我无法更改HTML或CSS类的组件。

这使得所有样式保持一致和集中化变得尴尬，因此我可以在任何地方更新元素样式。

我想到尝试使用@extend SASS功能从Bootstrap SASS文件中提取我想要的位。

因此，例如，如果这是生成的，我无法修改它：

<a href="#" class="myButton">Here is the button</a>

然后我可以这样做：

@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/variables";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/mixins/buttons";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/mixins/vendor-prefixes";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/mixins/tab-focus";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/mixins/opacity";
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap/buttons";


.myButton{
  @extend .btn, .btn-primary;
}

这为＆＃34; .myButton＆＃34;生成了不到200行（压缩前）的额外CSS。类。虽然它有效，但我不确定这是否是最好的方法，因为一旦我绘制了几个东西，它将为我的CSS文件添加很多大小。我想这一点在缩小和压缩后不是一个大问题，但由于冗余而感觉很糟糕。

我考虑过使用JavaScript来改变HTML输出，但我也不确定这是否是正确的方法，因为javascript浏览器。

在我的示例中，我只使用自定义样式表，然后使用标准缩小版本的bootstrap。要实现我想要的，我应该修改bootstrap核心并使用我的编译版本吗？

这听起来像是一个相当普遍的问题，所以我假设有人可能已经制作了一个类映射器或其他东西，但我找不到任何东西（除了许多地理自举地图）。

你会采取什么方法？

Answer 1

我想不出你的问题的其他解决方案..正如你所说的那样 - 它可以通过使用javascript根据需要将.btn添加到每个.myButton或使用@extend。

你可以进入中间并使用javascript并包含<noscript>标签来导入另一个带有所有bootstrap @ extend的css文件作为解决方法。

通过这种方式，您可以提供更少的代码，并且不会使用大量代码行填充css，并且可以支持具有禁用js的浏览器。

将Bootstrap类映射到其他类的最佳解决方案？

1 个答案: