如何使用 sass 正确避免在 HTML 上嵌入 twitter bootstrap 类名

我正在开发一个刚刚开始的 Rails 项目。我们想使用 twitter bootstrap 作为我们样式的基础，一开始我们只是直接在 HTML 代码上使用 bootstrap 的类名，就像 bootstrap 的文档中所示，但在阅读以下文章后：

可维护 CSS 的经验教训 http://blog.pamelafox.org/2012/12/a-tale-of-two-bootstraps-lessons.html

请停止在 HTML 中嵌入 Bootstrap 类 http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

很明显为什么这不是使用 bootstrap 的正确原因，所以经过更多阅读后：

将 CSS 与 HTML 解耦 http://thenittygritty.co/decouple-css

smacss http://smacss.com/

除此之外，似乎使用 sass @extend 是避免使用 bootstrap 的类名的正确方法，所以不要这样做：

<button type="submit" class="btn">Search</button>

我们会这样做：

<button type="submit" class="button">Search</button>

我们的 sass 代码如下所示：

.button {
   @extend ".btn";
}

这种方法的问题在于，除了每次扩展引导类以使用不同名称时都会添加的一堆额外选择器之外，在引导程序使用如下选择器的情况下：

.form-search .input-append .btn, .form-search .form-input-append .btn {
  border-radius: 0 14px 14px 0;
} 

该按钮不会获​​得正确的样式，因为 sass 不会将相同的规则应用于我们的自定义类名，我的意思是，sass 是not这样做：

.form-search .input-append .btn, .form-search .input-append .button, 
.form-search .form-input-append .btn, .form-search .form-input-append .button {
  border-radius: 0 14px 14px 0;
} 

所以我想知道，这是避免将 bootstrap 的类名嵌入到 HTML 中的正确方法吗？如果是这样，我应该如何处理这个问题（它经常发生）？如果没有，那么使用自定义类名但仍然从引导程序获取样式的更好方法是什么？

我真的很感激你对此的想法。请记住，我只是在学习整体网页设计（css、sass、less、html、js 等）。

当您将 .btn 重命名为 .button 时，您还应该将 .form-search 重命名为 .form-searchnew 等？ 在这种情况下，上面示例中的 sass 代码应该类似于：

.form-searchnew .input-appendnew .button {
  extend(.form-search .input-append .btn);
}

这是有道理的（我不知道 sass）并产生您期望的 css。

我认为 bootstrap 不仅仅与 css 有关。 Bootstrap 是关于 css、html（结构）和 javascript 的。即使你将 css 与 html 分开，我也不容易迁移到其他框架。除了 css 之外，您还必须更改 html 结构和 javascript 调用。

从 Twitter 的 Bootstrap 2 迁移到 3 的示例（请参阅：将 Bootstrap 更新到版本 3 - 我需要做什么？ https://stackoverflow.com/questions/17974998/updating-bootstrap-to-version-3-what-do-i-have-to-do/18069643）。我还想知道您是否可以通过将旧类扩展到新的 css 来进行迁移（请参阅：http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/）。读完后迁移指南 http://bootply.com/bootstrap-3-migration-guide，我想你不能。

其他解决方案。 Angular JS 将 Twitter 的 Bootstrap 与 JavaScript 解耦。此外，在这种情况下，迁移似乎并不轻松，请参阅：Bootstrap 3 的 Angular Dialog 指令 https://stackoverflow.com/questions/18150629/angular-dialog-directives-with-bootstrap-3/18241469

也许还可以阅读这篇文章：http://www.jasonwong.org/post/45849350459/migration-from-zurb-foundation-twitter-bootstrap-to http://www.jasonwong.org/post/45849350459/migrating-from-zurb-foundation-twitter-bootstrap-to。它指的是Bourdon http://bourbon.io/ and Neat http://neat.bourbon.io/.

他们网站上的示例：

<!-- HTML markup for the section right below this code block -->
<section>
  <aside>What is it about?</aside>
  <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article>
</section>

// Enter Neat
section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}
// And the result is...

正如他们所说：“它完全依赖于 Sass mixins，不会污染你的 HTML”，这似乎就是你正在寻找的方式。