Sass 是否可以覆盖容器的默认排水沟值？

是否可以使用基本值替代容器的默认檐槽值，例如：

$total-columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: 10px;

因此，您可以根据需要将排水沟从20px降至5px或任何其他所需值

.example{
    @include squish(1,1);
    li{
        @include span-columns(2,10);
        @include nth-omega(5n);
      }
}

是否可能通过mixin，我需要放置另一个容器/布局，还是应该坚持使用纯CSS来解决该任务？谢谢

更新： 更具体地说，我不想知道边沟的确切大小（据我目前所知，由于四舍五入，无论如何都很难），我只想最小化边沟并间接扩大列宽

目前，我已经压碎了3根柱子前后的7根柱子及其排水沟。到目前为止，这些列及其图像的宽度太小。因此，我想缩小边沟宽度，间接扩大列宽

Susy设置看起来是这样的：

$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;

由于容器位于整个页面的包装器内，所以到目前为止我还没有设置容器宽度

.wrapper {
    @include container;
    overflow-x: hidden;
    width:100%;
    max-width: 100%;
}

屏幕截图中显示的图像矩阵的特定选择器如下所示：

.projects {
    @include squish(3,3);
    li {
        @include span-columns(2,14);
        @include nth-omega(7n);
    }
}

你需要更多的细节吗？那么，您是否仍然建议使用with grid settings mixin来解决该问题？设置容器宽度是否真的有必要？如果我设置了相对值，那么绝对值就不必要了？谢谢，拉尔夫

更新2:

Ufff我尝试了下面评论中提到的建议小秘密的方法。但到目前为止，我无法得到一个干净的展示，更像是一个混乱的“拼凑”…）总的来说有点混乱。基本上，文章作者推荐了两个步骤。首先，他为包含元素的内容添加了-100%的右边距，然后在下一步将对象推回原位。我在一长串尝试中的最后一次设置现在看起来就是这样，但仍然看不到解决方案

 .example{
    @include squish(3,3);
    @include with-grid-settings($gutter: 0.1%){
    margin-right: -100%;
        li{
            @include span-columns(6,18);
            @include nth-omega(3n);
            @include pre(9);
        }
    }
}

我在网格设置中放置的右边空白，如建议的那样，在包含“li”元素的网格设置中混合。但问题是在哪里放置预混合，特别是它应该包含哪些数字（数字是否也考虑了挤压数字）？所有li的值是否相同，或者将图像单独推到其水平位置时是否需要for循环？li元素中的mixin顺序正确吗？放在哪里重要吗？在端部或跨距柱与NΩ之间？总的来说，我还是很困惑。网格、图像矩阵和Susy仍然让我的大脑旋转

更新3:

谢谢！我终于让它工作了。最后，关于我的解决方案，我有两个问题：

 .test{
    @include with-grid-settings($gutter: 0.1%){
        li{
            margin-right: -100%;
            float:left;
            @include span-columns(6,18);
            @include nth-omega(3n);
            $count:0;
            @for $i from 1 through 9 {
            &:nth-child(#{$i}) {
                $count: $count + 1;
                @include push($count);
                @if $count == 2{ $count: 0;}
                }   
            }   
        }
    }
}

for循环的布局会有更优雅的方式吗？第二，为什么这个版本和我注释$count时的版本一样：$count+1；语句是否会导致相同的视觉效果？实际上，push变量没有第二次和第三次计数。你知道为什么没有$count:$count+1；，它还能工作吗；？谢谢

更新4: 我又玩了一会儿，结果发现下面的版本很有魅力。似乎根本不需要$count变量，也不需要push/pre-mixin中包含的值的增量增长。一个简单的0成功了。再次感谢您的帮助

  .test{
    @include with-grid-settings($gutter: 0.5%){
        li{
            margin-right: -100%;
            @include span-columns(6,18);
            @include nth-omega(3n);
            @for $i from 1 through 9 
            {
                &:nth-child(#{$i}) 
                {
                    @include push(0);
                }   
            }   
        }
    }
  }

更新5

我已经在下面的最后一条评论中提到，更新4中显示的示例并没有第一次看到时所预期的那么好。我现在试图完全重建Palantir文章中的建议。下面是视频中显示的7x4和3x3矩阵的scss部件：

---

在第一次查看时，矩阵看起来是断开的，但是如果您仔细查看视频中的检查器，就会发现每个元素在两个矩阵中都被推到了正确的水平位置。唯一的问题是每个li都包含在单独的行中。这是我能得到的最接近的版本。：/现在我不知道如何将这些片段组合在一起，得到一个合适的矩阵。我或多或少地尝试了浮动和显示属性的可能性。但是没有运气。有人可能有什么提示吗？

您可以使用

和-grid-settings（）

（）来包装代码：

因为您不想更改实际的容器宽度，所以我们可以不去管它。如果您希望

.projects

填充（来自

squish（）

）受到影响，则由您决定，但我假设您不希望受到影响。在这里，只需更改

li

s的

$槽宽

：

@include with-grid-settings($gutter: .5%) {
  li {
    @include span-columns(2,14);
    @include nth-omega(7n);
  }
}

---

就这样。如果您确实想使用调整后的设置，只需将它们移动到mixin中即可。

是的，但我需要更详细的信息，确切地说明您希望结果是什么。您可能需要将

与网格设置一起使用

，并且您可能还需要根据所需的确切结果设置容器宽度。非常感谢！这正是我所期待和希望使用的。在文档中，这只是有点误导，我最初认为我需要另一个容器。但那样的话，它真是太棒了！谢谢只有一个后续问题。为什么最后一个排水沟不符合所做的设置？或这是一个舍入问题吗？是的，这看起来像是由于重复而被夸大的舍入错误。我不喜欢将其作为默认设置，但在这种情况下，您可能希望使用这种方法。添加

右边距：-100%

将所有元件向左齐平，然后使用

pre（）

将每个元件推回原位。如果您在GitHub上提交了一个问题，我将在下一个版本中将其作为一个功能进行研究。我已经知道这篇文章，但是这种方法的应用有点麻烦。我想我会再次更新我的初始帖子，这里的评论栏可能太有限了/两个快的

@include with-grid-settings($gutter: .5%) {
  li {
    @include span-columns(2,14);
    @include nth-omega(7n);
  }
}