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

Question

我正在从事一个刚刚开始的 Rails 元素。我们想使用 twitter bootstrap 作为我们样式的基础，一开始我们只是直接在 HTML 代码上使用 bootstrap 的类名，就像 bootstrap 的文档中显示的那样，但是在阅读了以下帖子之后:

Lessons learned in maintainable css

Please stop embedding Bootstrap classes in your HTML

很清楚为什么这不是使用 bootstrap 的正确原因，所以在阅读更多内容之后:

Decouple Your CSS From HTML

smacss

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

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

我们会这样做:

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

我们的 sass 代码看起来像这样:

.button {
   @extend ".btn";
}

这种方法的问题，除了每次我们扩展 Bootstrap 类只是为了使用不同的名称时都会添加一堆额外的选择器之外，是在 Bootstrap 使用这样的选择器的情况下:

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

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

.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 中的正确方法吗？如果是这样，我应该如何处理这个问题(它经常发生)？如果不是，使用自定义类名但仍然从 Bootstrap 获取样式的更好方法是什么。

我非常感谢您对此的看法。请记住，我只是在学习整体网页设计(css、sass、less、html、js 等)。

Answer 1

当你将 .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(参见:Updating Bootstrap to version 3 - what do I have to do?)。我还想知道您是否可以通过将旧类扩展到新 css 来进行迁移(参见:http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/)。看完migration guide ，我认为你不能。

其他解决方案。 Angular JS 将 Twitter 的 Bootstrap 与 javascript 分离。同样在这种情况下，迁移似乎并不轻松，请参阅:Angular Dialog directives with Bootstrap 3

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

来自他们网站的示例:

<!-- 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 混入并且不会污染您的 HTML”，这似乎正是您正在寻找的方式。