Question

我遇到了Susy和指南针的问题。

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

我尝试使用with-grid-settings mixin，但我只能更改列和网格填充，装订线宽度和列宽不会改变。

代码如下：

        $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，但现在就避免使用它。

我已尝试过此代码的许多变体，但没有运气。打开@ susy-grid-background时我看到的一个奇怪的事情就是网格发生了变化，但是网格中的元素没有移动。

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

编辑＃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)的含义会随着您更改设置而发生变化。你可以通过在mixins中包装东西来干燥它的各个部分，但这取决于你。这就是我们为at-breakpoint所做的一切，你可以按照自己的方式去做。

指南针Susy：“With-Grid-Settings（）” - 无法使天沟宽度工作

1 个答案: