在Susy 2中定义全局网格上下文

Question

在susy中，很容易定义一个元素，其中元素根据全局变量改变宽度。我试图学习Susy 2，但无法确定它如何与断点集成一起使用。

我在这里做了一些psudocode来指出我要存档的内容

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％（减去一些排水沟）

你如何存档？我看过几个教程，但他们没有谈到这个。 This question谈论类似的事情。难道我们不得不经常告诉Susy使用哪种布局？我们当然可以说x **of** something但我发现全局定义网格并且一直跳过 非常方便。

Answer 1

你可以在Susy 2中完成你在Susy 1中的方式。语法更明确，但想法是一样的。假设您在Susy 1中使用at-breakpoint，则会在Susy 2 [see the docs]中使用susy-breakpoint：

$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的全部功能来定义媒体查询。