html - CSS Style类类继承解决方法

Question

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

现代网络开发的基石之一是设计和结构的分离。 CSS Zen Garden 是这条道路上的一个很好的展示和布道者。

但是，新趋势是响应性，而这个基石被搁置一旁。像 Zurb Foundation 和 Twitter Bootstrap 这样的框架非常棒，但它们迫使程序员在他的结构中添加样式。如果我在我的 HTML 代码上写 column-4 或 grid-xs-4，我就是在明确地谈论那里的设计。

理想情况下，我会使用如下代码编写一个 CSS 文件:

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

那是不可能的，不支持。

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

1. 让我接触框架文件，这让升级变得痛苦；
2. 结果可能会非常困惑。

问题是:我如何使用像 Foundation 和 Bootstrap 这样的框架，将设计和结构分开，充分利用它们的响应类？

Answer 1

如果您愿意重新考虑您对编译 CSS 的立场，我相信 Foundation 做了很多尝试并为您提供两全其美的方法:一个您无需自己编写的网格，同时仍然使用语义类。

如果您向下滚动 Foundation Docs 上的任何页面通常有一个“使用 Sass 自定义”部分，它为您提供 SCSS 混入，使您自己的类具有与 Foundation 的内置表示类相同的能力。

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

即使没有提供 mixin 和像 Foundation 这样的框架，SCSS 也使您能够像在您的问题中一样扩展其他类:

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

在这种特殊情况下，我不确定您是否应该@extend 现有类或@include grid-column 连同media queries .我只用过之前版本的 Foundation，文档还有些欠缺，但基本原理已经有了。 :)