指南针苏西："With-Grid-Settings()" - 无法使排水沟宽度工作

Question

我在使用指南针时遇到Susy问题。

我正在尝试创建一个桌面大小的网格，然后更改移动大小的网格设置。

我尝试使用带有网格设置的混合，但我只能更改列和网格填充，檐沟宽度和列宽不会更改。

代码如下：

$total-columns  : 16;        
$column-width   : 6em;           
$gutter-width   : 6em;            
$grid-padding   : 3em;  
@media (#{$tablet-min}) and (#{$tablet-max}) {
.l_content {
@include container;
}
};
@media (#{$desktop-min}) and (#{$desktop-max}) {
@include with-grid-settings(8,6em,10em,10em) {
.l_content {
@include container;
}
};
};
.content-item {
@include span-columns(8, 16);
&.omega{
@include span-columns(8 omega, 16);
}
}

DOM元素：

<div class="l_content">
<div class="content-item">
<div class="content-item omega">
</div>

我知道我可以使用at-breakpoint()mixin，但现在要避免使用它。

我尝试过这个代码的许多变体，但都没有成功。当打开@sussy网格背景时，我看到的一件奇怪的事情是，网格会发生变化，但网格中的元素不会移动。

Eric Meyer如果你在那里，我将非常感谢你的帮助！！我已经阅读了你所有的回复，但没有任何成功。

EDIT#1这是编写的两个mixin。第一个处理列和外部填充。第二个处理页边距和列大小。外部轴网设置将应用于容器元素，内部轴网设置应用于柱跨度元素。希望我能完全理解这一点，这会有所帮助。

@mixin outter-grid-settings(
$columns,
$outter-padding
){
@include with-grid-settings($columns, 1, 1, $outter-padding){
@content;
};
}
@mixin inner-grid-settings(
$column-width,
$column-margin
){
@include with-grid-settings(1, $column-width, $column-margin, 1){
@content;
};
}

Answer 1

Sass不知道DOM，这意味着Susy元素不知道它们的容器，除非您显式地建立该连接。为此，您必须更改跨度输出以及每个断点处的容器输出。您的span-columns(8, 16)仅根据全局设置为您提供输出。您需要在媒体查询/with-grid-settings组合框中添加一个新的跨度。

.content-item {
@include span-columns(8, 16);
&.omega{
@include span-columns(8 omega, 16);
}
@media (#{$desktop-min}) and (#{$desktop-max}) {
@include with-grid-settings(8,6em,10em,10em) {
@include span-columns(8, 16);
};
};
}

这看起来可能重复，但事实并非如此，因为span-columns(8, 16)的含义在任何更改设置时都会发生变化。你可以把它的各个部分用混合物包起来，但这取决于你自己。这就是我们为at-breakpoint所做的一切，你可以用自己的方式。