0

在 susy one 中，定义元素根据全局变量改变宽度的范围非常容易。我正在尝试学习 Susy 2，但无法真正理解它如何与断点集成一起工作。

我在这里做了一些伪代码来指出我想要存档的内容

Susy SASS 地图

$small: (
    columns: 4,
);

$medium: (
    columns: 18,
);

$large: (
    columns: 24,
);

一个html元素

.foo {

    span 2

    at medium
        span 6

    at large
        span 12

}

结果我想要.foo

  • 小 = 50%（减去一些排水沟）
  • 中等 = 33,3333%（减去一些排水沟）
  • 大 = 50%（减去一些排水沟）

你如何归档这个？我看过几个教程，但他们没有谈到这一点。这个问题谈到了类似的事情。是否有可能我们必须不断地告诉 Susy 使用哪种布局？我们当然可以说x **of** something，但我发现只在全局范围内定义网格并跳过所有时间非常方便。

4

1 回答 1

1

您可以在 Susy 2 中执行此操作，几乎与在 Susy 1 中执行的方式完全相同。语法更明确，但想法相同。假设您at-breakpoint在 Susy 1 中使用，您将susy-breakpoint在 Susy 2 中使用 [参见文档]：

$small: 4;
$medium: 18;
$large: 24;

// Susy 1    

$columns: $small;

.foo {
  @include span-columns(2);

  @include at-breakpoint($medium) {
    @include span-columns(6);
  }

  @include at-breakpoint($large) {
    @include span-columns(12);
  }
}

// Susy 2

@include layout($small);

.foo {
  @include span(2);

  @include susy-breakpoint(container($medium), $medium) {
    @include span(6);
  }

  @include susy-breakpoint(container($large), $large) {
    @include span(12);
  }
}

container()您可以根据需要用自己的断点替换参数。我使用了容器函数，因为它会模仿 Susy 1 默认设置断点的方式。它少了一点魔法，更明确了一点，而且更强大了。您现在拥有了可用于定义媒体查询的Breakpoint的全部功能。

于 2014-06-06T17:22:22.030 回答