1

我正在使用 SASS 创建一个响应式站点。目前，我的代码被构造成多个部分：

  • 一些默认颜色和尺寸
  • 整体布局
  • 每个元素的部分

作为这个组织的结果，我发现我最终会通过生成的 CSS 多次声明媒体查询 - 感觉很混乱。因此，我一直在尝试一些想法来保持当前结构，但最终得到了更简单的结果代码。

我的想法是这样的：

  1. 一个变量包含一个部分列表@import
  2. 一个变量包含一个媒体查询大小的列表（总是使用最小宽度，因此这个列表只不过是一串数字）
  3. 然后，每个部分 ( _footer.scss, _header.scss) 将包含一个@mixin标题，例如 - content-footer、content-header 等
  4. 这些@mixin将采用与媒体查询相关的单个变量，并为该条件输出适当的代码。
  5. style.scss将@import列表中的每个部分，
  6. 然后分别循环遍历每个媒体大小和部分，调用函数和媒体大小。

上述过程将导致这样的事情被影响......

@import 'footer';
@import 'header';
@include content-footer(0);
@include content-header(0);
@include content-footer(320);
@include content-header(320);
@include content-footer(640);
@include content-header(640);

ETC..

我的问题是 - 我如何调用动态标题@mixin？类似的东西content-#{$partial}似乎应该工作，但没有。

我想如果这不起作用，那么我可以每次都重新导入部分，但这似乎有点矫枉过正......

@import 'footer';
@include content(0);
@import 'header';
@include content(0);
@import 'footer';
@include content(320);
@import 'header';
@include content(320);
@import 'footer';
@include content(640);
@import 'header';
@include content(640);
4

1 回答 1

4

就个人而言，我觉得在整个文档的许多地方声明媒体查询很舒服。它感觉是面向对象的，并且很容易跟踪实际发生的事情。我通常对编辑一个模块特别感兴趣，而不是整个布局，所以对我来说更有意义。

我有一个看起来像这样的mixin：

$mq-small:   30em;
$mq-medium:  50em;
$mq-large:   70em;

@mixin mq($size) {
  @if      $size == small  { @media only screen and (min-width: $mq-small) { @content; } }
  @else if $size == medium { @media only screen and (min-width: $mq-medium) { @content; } }
  @else if $size == large  { @media only screen and (min-width: $mq-large) { @content; } }
}

这允许我编写这样的媒体查询：

.element {
  // generic rules

  @include mq(medium) {
    // size-specific rules
  }
}

这会创建此输出：

.element {
  // generic rules
}

@media only screen and (min-width: 50em) {
  .element {
    // size-specific rules
  }
}

然后，当项目准备好部署时，我将输出 CSS 中的媒体查询手动合并到一个地方以消除臃肿。

它不是很干净，但也没有必要，而且工作流程很棒。上次我听说，这种合并应该在未来版本的 SASS 中自动发生。也许这只是一个谣言，但它会很好。

于 2013-10-22T07:59:46.733 回答