Question

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

现代网络开发的一个基石是设计和结构的分离。 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等框架，保持设计和结构分离，充分利用他们的响应类？

Answer 1

如果你愿意重新考虑你对编译CSS的立场，我相信基金会做了很多努力，试着给你两全其美：你不需要在使用语义类时自己编写的网格。

如果向下滚动Foundation Docs上的任何页面，通常会有一个“自定义与Sass”部分，它为您提供SCSS mixins，使您自己的类具有与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。我只使用过早期版本的基础知识，文档仍然有点缺乏，但你有基本原则。：）