如何使用sass正确避免嵌入twitter bootstrap类名称在HTML [英] How to use sass to properly avoid embedding twitter bootstrap class names on HTML
问题描述
我正在开始一个Rails项目。我们希望使用twitter bootstrap作为我们样式的基础，一开始我们只需直接在HTML代码中使用bootstrap的类名，就像bootstrap的文档中所示，但是在阅读以下帖子之后：
I am working on a Rails project that is just starting. We want to use twitter bootstrap as a base for our styles, at the beginning we would simply use bootstrap's class names directly on the HTML code, just like is shown in bootstrap's documentation, but after reading the following posts:
Lessons learned in maintainable css
它变得清楚为什么不是正确的为什么使用引导，所以经过一些更多的读数：
it became clear why that's not the proper why to use bootstrap, so after some more readings:
其他，似乎使用sass @extend是避免使用引导程序类名的正确方法，所以不要这样做：
among other, it seemed that using sass @extend was the proper way to avoid using bootstrap's class names, so instead of doing this:
<button type="submit" class="btn">Search</button>
我们这样做：
<button type="submit" class="button">Search</button>
，我们的sass代码将如下所示：
and our sass code would look like this:
.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;
}
按钮不会得到正确的样式，因为sass将不会应用规则到我们的自定义类名称，我的意思是，sass 不：
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;
}
所以我不知道，这是避免嵌入引导类名的正确方法HTML，如果是这样，我应该如何处理这个问题（它频繁发生）？如果没有，使用自定义类名还是从引导程序中获取样式的更好方法。
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.
我真的很感激你的想法。请记住，我只是在了解整体网页设计（css，sass，less，html，js等）。
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#placeholders ，以免打扰您的CSS。很可能你不会使用引导程序中包含的每一个元素和占位符，只有当它们实际上扩展到代码中时才会被写入你的样式表。
I recommend you have a look at sass placeholder classes http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders in order not to bloath your css. Most likely you won't be using every single element included in bootstrap and placeholders only get written to your stylesheet if they are actually extended in your code.
人们往往对CSS框架如何工作以及如何解耦css和html实际工作感到困惑。
对于非常大的网站（或者你期望最终增长非常大的网站），性能和css文件大小至关重要，某种OOCSS方法是你最好的选择。这意味着你必须直接在你的HTML中格式化代码。
Also, I think people tend to get confused about how css frameworks work and how decoupling css and html actually works. For very large websites (or ones that you expect eventually to grow very large), where performance and css file size is crucial, some kind of OOCSS approach is your best bet. And this means inevitably that you have formatting code directly in your HTML.
如果你可以让自己的效率稍低一点，并希望你的HTML干净，语义类（按钮示例：号召性用语，号召性用语，提交，btn-primary，btn-corporate-color等）
If you can allow yourself to be a little less efficient and want your HTML clean, make sure to use semantic classes (examples for buttons: call-to-action, call-to-action-secondary, submit, btn-primary, btn-corporate-color, etc...)
还要记住解耦你的JS从CSS！使用特殊类来附加行为（例如js-submit，js-call-to-action等等）
Also remember to decouple your JS from CSS! use special classes for attaching behaviour (example js-submit, js-call-to-action, etc....)
最后但并非最不重要：不要计划更新您的CSS框架。这些框架旨在为您提供头条，而不是作为您的整体设计解决方案。扩展他们，适应他们，使他们自己，投资设计和创建自己的外观，以使您的应用程序独特。
如果什么让你认为更新是一个担心，以跟上标准的变化，更好地使用罗盘mixins。
Last but not least: don't plan for updating your css framework. These frameworks are meant to give you a headstart, not to be your overall design solution. Extend them, adapt them, make them your own, invest in design and create your own look in order to make your app unique. If what makes you think of updating is a worry to keep up with standard changes, better use compass mixins.
这篇关于如何使用sass正确避免嵌入twitter bootstrap类名称在HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
