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

Question

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

在可维护的CSS中学到的经验教训

请停止在HTML中嵌入Bootstrap类

很明显为什么这不适合使用bootstrap,所以经过一些更多的阅读:

从HTML中分离CSS

smacss

除此之外,似乎使用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 不会这样做:

.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等).

Answer 1

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

\n\n

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

\n\n

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

\n\n

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

\n\n

示例从 Twitter 的 Bootstrap 2 迁移到 3（请参阅：将 Bootstrap 更新到版本 3 - 我必须做什么？）。我还想知道您是否可以通过将旧类扩展到新的 css 来迁移（请参阅：http ://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap -3/）。阅读迁移指南后，我认为你不能。

\n\n

其他解决方案。Angular JS 将 Twitter 的 Bootstrap 与 JavaScript 解耦。此外，在这种情况下，迁移似乎并不轻松，请参阅：Angular Dialog Directives with Bootstrap 3

\n\n

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

\n\n

他们网站上的示例：

\n\n

<!-- HTML markup for the section right below this code block -->\n<section>\n  <aside>What is it about?</aside>\n  <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon\xe2\x80\xa6</article>\n</section>\n\n// Enter Neat\nsection {\n  @include outer-container;\n  aside { @include span-columns(3); }\n  article { @include span-columns(9); }\n}\n// And the result is...\n

\n\n

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

\n