CSS Style 类类继承解决方法答案

【问题标题】：CSS Style class-like inheritance workaroundCSS Style 类类继承解决方法
【发布时间】：2014-01-04 16:57:24
【问题描述】：

这是我在这里看到的一个问题，但从未如此关注。

现代 Web 开发的一个基石是设计和结构的分离。 CSS Zen Garden 在这条道路上是一个很好的展示和传播者。

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

理想情况下，我会用这样的代码编写一个 CSS 文件：

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

这是不可能的，不支持。

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

问题是：如何使用 Foundation 和 Bootstrap 等框架，将设计和结构分开，充分利用它们的响应式类？

【问题讨论】：

【解决方案1】：

如果您愿意重新考虑您对已编译 CSS 的立场，我相信 Foundation 会尽力为您提供两全其美的优势：您无需自己编写网格，同时仍使用语义类。

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

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

即使没有提供 mixins 和 Foundation 之类的框架，SCSS 也可以让您几乎完全按照您的问题扩展其他类：

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

在这种特殊情况下，我不确定您是否应该@extend 现有类或@include grid-column 与media queries 一起使用。我只用过Foundation的早期版本，文档还有些欠缺，但基本原理就在那里。 :)

【讨论】：