0

简而言之，通过使用 Susy 的断点响应式混合，有没有一种方法或功能可以在断点调用的主体中包含外部 CSS 文件？

像这样的东西：

.page {
  border: 1px dashed #000;
  height: 650px;

  @include container;

  .content {
    color: red;
    text-align: center;
    border: 1px dashed red;
    height: 400px;

    @include span-columns(4 omega, 6);

    .main {
      color: green;
      border: 1px dashed green;
      text-align: center;
      @include span-columns(1, 2);
    }

    .secondary {
      color: blue;
      border: 1px dashed blue;
      @include span-columns(2, 3);
    }
  }

  @include at-breakpoint(800px 8 250px) {
    @include container; 

    .content {
      @include span-columns(1, 1);
    }

    //IMPORT or INCLUDE CSS FILE HERE somehow... 

  } //end of breakpoint

}

我希望这是可能的，因为这比编写我希望内联应用的所有 CSS 规则要干净得多。让我知道这是否可能或在这种情况下最好的做法是什么。

谢谢！

4

1 回答 1

1

当然。这实际上不是关于 Susy 的问题，而是关于 Sass 的问题。对于在任何包装 mixin 的上下文中工作，相同的答案都是正确的。

您只能在根级别导入文件（至少目前是这样）——但这不是您唯一的选择。我见过人们在 mixins 中编写他们所有的网站样式，然后根据需要简单地包含这些 mixins：

@mixin medium-layout {
  // your medium css
}

.page {
  @include at-breakpoint($medium) {
    @include medium-layout;
  }
}

您可以使用任意数量的 mixin，随意调用它们，然后将它们放在其他文件中（只要@include在调用 mixins 之前您就是这些文件）。

我使用不同的方法。我没有将所有内容都嵌套在.page选择器下，每个断点都有大组，而是将它们分解为模块，并根据需要将断点样式附加到每个模块。

// _main.scss
.main {
  color: green;
  @include at-breakpoint($medium) { /* changes to main */ }
}

// _secondary.scss
.secondary {
  color: blue;
  @include at-breakpoint($medium) { /* changes to secondary */ }
}

从移动优先的角度来看，断点样式可能需要覆盖或构建现有样式，这会将所有相关代码保存在一个位置。

于 2013-09-23T07:03:38.190 回答