我正在一个刚刚开始的Rails项目中工作。我们希望使用twitter bootstrap作为样式的基础，一开始，我们将直接在HTML代码上直接使用bootstrap的类名，就像bootstrap的文档中所示，但是在阅读了以下文章之后：
很清楚为什么不使用引导程序是不正确的，所以在读了一些之后：
除其他外，似乎使用sass @extend是避免使用bootstrap的类名的正确方法，所以不要这样做：
<button type="submit" class="btn">Search</button>
我们可以这样做：
<button type="submit" class="button">Search</button>
并且我们的sass代码如下所示：
.button {
@extend ".btn";
}
The problem with that approach, besides the bunch of extra selectors that will be added each time we extend a bootstrap class just to use a different name, is that in cases where bootstrap uses selectors like this:
.form-search .input-append .btn, .form-search .form-input-append .btn {
border-radius: 0 14px 14px 0;
}
the button won't get the right style because sass will not apply that same rule to our custom class name, I mean, sass is not doing this:
.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;
}
So I wonder, is this the right way to avoid embedding bootstrap's class names into HTML, if so, how should I handle this problem (it happens frequently)? if not, what would be a better way to use custom class names but still get the styles from bootstrap.
I really appreciate your thoughts on this. Please keep in mind that I am just learning about overall web design (css, sass, less, html, js, etc.).
对于大多数新手来说，您是在正确的道路上；您一直在阅读的资源非常棒。但是，我认为您担心的问题可能没有道理：
实际上，我认为您一定会误会。根据Sass文档：
有关完整的代码示例，请参见http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works。
您原来的解决方案实际上是正确的。使用扩展，但不带引号：
我使用您的示例对此进行了测试，并且可以正常工作。Sass用“ .btn”复制所有选择器，在这些新创建的选择器上，用“ .button”替换“ .btn”。
另外，如果Sass为您的喜好产生过多的重复，也不必担心（只要您遵循发布的链接所指出的最佳实践）即可。如果服务器使用gzip或等效文件，则很容易压缩重复代码；客户端应该不会注意到加载速度变慢，尽管“解压缩” CSS可能会花费更长的时间。至于CSS选择器的速度，也不必担心。速度对选择器至关重要的唯一情况是在JavaScript方面，尤其是jQuery。对于您的Sass代码，只需遵循关于可维护性的最佳实践（尤其是在尝试模块化时，即SMACSS），那么一切都会很好。