css – 如何使用sass来正确避免在HTML上嵌入twitter引导类名称

前端之家收集整理的这篇文章主要介绍了css – 如何使用sass来正确避免在HTML上嵌入twitter引导类名称前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开始刚刚开始的Rails项目。我们想使用twitter引导作为我们样式的基础,最开始我们只需直接在HTML代码中使用引导类的类名,就像在bootstrap的文档中所示,但是在阅读以下帖子之后:

Lessons learned in maintainable css

Please stop embedding Bootstrap classes in your HTML

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

Decouple Your CSS From HTML

smacss

除此之外,似乎使用sass @extend是避免使用引导类的名称的正确方法,而不是这样做:

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

解决方法

当您将.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.它指的是BourdonNeat

从他们的网站的例子:

<!-- 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 mixins,不会污染您的HTML”,这似乎是您要寻找的方式。

原文链接:/css/218545.html

猜你在找的CSS相关文章