Question

我正在使用SASS创建响应式网站。目前，我的代码被组织成许多部分：

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

作为这个组织的结果，我发现我最终通过生成的CSS多次声明媒体查询 - 它只是感觉很乱。因此，我一直在努力保留当前的结构，但最终得到的代码更简单。

我的想法是这样的：

变量包含@import
变量包含媒体查询大小的列表（始终使用最小宽度，因此此列表只不过是一串数字）
每个部分（_footer.scss，_header.scss）都会包含@mixin标题，例如内容页脚，内容标题等
那些@mixin将采用与媒体查询相关的单个变量，并为该条件输出适当的代码。
style.scss将@import列表中的每个部分
然后分别循环浏览每个媒体大小和部分，调用函数和媒体大小。

上述过程会导致这样的事情发生......

@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);

等。

我的问题是这样 - 我如何调用动态标题@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);

Answer 1

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

我有一个看起来像这样的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的未来版本中自动发生。也许这只是一个谣言，但它会很好。

媒体查询的SASS代码结构

1 个答案: