这是我在这里看到的一个问题,但从来没有如此关注。

现代Web开发的基础之一是设计和结构的分离。 CSS Zen Garden在这方面是一个很好的展示和传播者。

但是,新趋势是响应能力,而这一基石则被搁置一边。诸如Zurb Foundation和Twitter Bootstrap之类的框架都很不错,但是它们迫使程序员向其结构中添加样式。如果我在HTML代码上写column-4grid-xs-4,那么我在这里明确地谈论设计。

理想情况下,我将使用以下代码编写CSS文件:

.header-top {
  inherit "small-6 medium-4 columns";
}


这是不可能的,不受支持。

一个可能的解决方法是将我的类添加到框架的CSS文件中。那很容易,但是


使我接触框架文件,这使升级很痛苦;
结果可能会令人吃惊。


问题是:如何使用诸如Foundation和Bootstrap之类的框架,使设计和结构分开,充分利用它们的响应类?

最佳答案

如果您愿意重新考虑对已编译CSS的态度,我相信Foundation会做很多尝试,并为您提供两全其美的方法:一个网格,您无需在仍然使用语义类的情况下编写自己。

如果您向下滚动Foundation Docs上的任何页面,通常会有一个“用Sass进行自定义”部分,该部分为您提供SCSS mixin,使您自己的类具有与Foundation的内置表示类相同的功能。

.header-top {
  @include grid-column(6);
}


即使没有提供的mixin和诸如Foundation之类的框架,SCSS仍使您能够扩展其他类,几乎完全像您的问题一样:

.header-top {
  @extend .small-6;
  @extend .medium-4;
  @extend .columns;
}


在这种情况下,我不确定是否应该将@extend现有类或@include grid-columnmedia queries一起使用。我只使用过Foundation的早期版本,但仍然缺少一些文档,但是这里有基本原理。 :)

关于html - 类CSS样式的继承解决方法,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20923874/

10-14 14:51
查看更多