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

我正在从事一个刚刚开始的Rails项目。我们想使用twitter引导作为我们风格的基础，一开始我们只需在HTML代码中直接使用引导的类名，就像引导的文档中所示，但在阅读以下文章之后：

很明显，为什么这不是使用引导的正确原因，所以在阅读了更多的资料之后：

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

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

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

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

.button {
   @extend ".btn";
}

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

按钮无法获得正确的样式，因为sass不会将相同的规则应用于自定义类名，我的意思是，sass正在而不是执行以下操作：

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

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

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

---

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

当您将.btn重命名为.button时，您还应该将.form search重命名为.form search new等？ 在这种情况下，上面示例中的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的引导程序2迁移到3（请参阅：）。我还想知道是否可以通过将旧类扩展到新的css进行迁移（请参阅）。看完这本书后，我想你不能

其他解决办法。Angular JS将Twitter的引导与javascript分离。在这种情况下，迁移似乎不是无痛的。请参见：

也许你也会读这篇文章：。它指的是和

他们网站上的示例：

<!-- 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...

是关于什么的？
Neat是一个基于Sass和Bourbon的开源语义网格框架…
//输入整洁
部分{
@包括外部容器；
旁边{@包括跨柱（3）；}
第{@条包括跨栏（9）；}
}
//结果是。。。

---

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

使用

@extend

，但不要引用选择器：

.按钮{
@扩展.btn；
}

然后，您将看到Sass也扩展了相关的选择器，就像您所希望的那样（

.form search.input append.btn

等）

…除了每次扩展引导类以使用不同名称时将添加的一堆额外选择器之外

---

@extend

通过复制选择器工作。如果您不想这样做，可以改为在HTML中“扩展”——即添加引导程序的类名。：）

我建议您查看一下sass占位符类，以免使css膨胀。很可能您不会使用引导中包含的每个元素，占位符只有在代码中实际扩展时才会写入样式表

此外，我认为人们往往会对css框架如何工作以及如何将css和html解耦感到困惑。 对于性能和css文件大小至关重要的非常大的网站（或者您期望最终会变得非常大的网站），某种OOCSS方法是您的最佳选择。这就不可避免地意味着您的HTML中直接存在格式化代码

如果您可以让自己的效率降低一点，并且希望HTML干净，请确保使用语义类（按钮示例：调用操作、调用操作辅助、提交、btn主、btn公司颜色等）

还记得将JS与CSS分离！使用特殊类来附加行为（例如js submit、js call to action等）

最后但并非最不重要的一点：不要计划更新css框架。这些框架旨在为您提供一个起点，而不是作为您的总体设计解决方案。扩展它们，调整它们，让它们成为你自己的，投资于设计，创造你自己的外观，以使你的应用程序独一无二。

---

如果让您想到更新的是为了跟上标准的变化，那么最好使用compass mixins

对于大多数人来说，你都是新手，这是正确的；您一直在阅读的资源非常好。但是，我认为你的担心可能没有道理：

…按钮将无法获得正确的样式，因为sass不会将相同的规则应用于自定义类名

事实上，我想你一定弄错了。根据Sass文件：

@extend的工作原理是在样式表中出现扩展选择器（.e.g.error）的任何位置插入扩展选择器（例如.seriousError）

有关完整的代码示例，请参见

您最初的解决方案实际上是正确的。使用扩展，但不使用引号：

.button {
  @extend .btn; //no quotes
}

我使用您的示例对此进行了测试，结果正确。Sass用“.btn”复制所有选择器，并在新创建的选择器上用“.button”替换“.btn”

此外，如果Sass产生了太多的重复，你不必担心（只要你遵循你发布的链接所指出的最佳实践）。如果服务器使用gzip或同等版本，则重复代码很容易压缩；客户机不应该注意到任何较慢的加载时间，尽管“解压缩”CSS可能需要稍长的时间。至于CSS选择器

//these examples wouldn't really work
//because bootstrap needs more markup
#my-header {
    @extend .navbar;
}
#my-header h1 {
    @extend .branding;
}
#my-main {
    @extend .container;
}

//good example
.my-widget {
    @extend .well;
    @extend .hero-unit;
}
.my-widget a {
    @extend .btn;
}