Question

是否可以覆盖具有基值的容器的默认装订线值，例如那样：

$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来解决这个问题？感谢

的更新 的更具体地说，我不寻找一个精确的排水沟大小（据我所知，到目前为止，由于四舍五入，无论如何都很难），我只是想尽量减少排水沟并间接扩大柱宽。

https://dl.dropbox.com/u/8578/Boxes.png

此刻，我已经在包含的7根柱子和他们的排水沟之前和之后挤压了3根柱子。到目前为止，列及其图像的宽度太小。因此，我希望缩小沟槽宽度并间接扩大柱宽。

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来解决这个问题吗？设置容器宽度mixin真的有必要吗？如果我设置事物相对没有绝对值应该是必要的吗？谢谢Ralf

更新2：

Ufff我尝试了下面评论中提到的建议的小秘密方法。但到目前为止，我无法得到一个干净的显示，更像是一个混乱的混乱“拼凑”...;）有点令人困惑。基本上文章作者推荐了2个步骤。首先，他为包含内容的元素添加了-100％的margin-right，并在下一步中将对象推回到他们的位置。我在一系列尝试中的最后一次设置现在看起来像是那样，但仍然没有解决方案。

 .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”的包含元素中的with-grid-settings mixin中。但问题是在哪里放置预混合物，特别是它应该包含哪些数字（还有考虑挤压数的数字）？它是所有li的相同值还是将图像单独推到其水平位置所需的for循环？并且li元素中的mixin顺序是正确的吗？放置它的位置是否重要？在跨栏或中间跨栏和nth-omega？总之，我仍然感到困惑。网格，图像矩阵和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的scss部分以及视频中显示的3x3矩阵：https://dl.dropbox.com/u/8578/matrix.mov

.7x3{
    @include with-grid-settings($gutter: 0.25%){
        li{
            margin-right: -100%;
            @include trailer(1);
            @include span-columns(2,14);
            @include nth-omega(7n);
            $y: 0;
            @for $x from 1 through 28
            {
                &:nth-child(#{$x}){
                margin-left: ($y * columns(2,14)) + ($y * gutter(14));
                $y: $y + 1;
                @if $y > 6{
                  $y: 0;
                }

                }
            }
        }
    }
}


.3x3{
    @include with-grid-settings($gutter: 1%){
        li{
            margin-right: -100%;
            @include trailer(1);
            @include span-columns(6,18);
            @include nth-omega(3n);
            $j: 0;
            @for $i from 1 through 9
            {
                &:nth-child(#{$i}){
                    margin-left: ($j * columns(6,18)) + ($j * gutter(18));
                    $j: $j + 1;
                    @if $j > 2{
                      $j: 0;
                    }
                }
            }
        }
    }
}

第一眼看，矩阵看起来很破碎，但是如果你仔细观察视频中的检查器，看起来每个元素都被推到两个矩阵中的正确水平位置。唯一的问题是每个li都包含在单独的行中。这是我能够得到的最接近的版本。：/现在我没有想法如何将这些部分组合在一起以获得适当的矩阵。我尝试浮动或显示属性或多或少的可能性。但没有运气。任何人都有提示吗？

Answer 1

您可以使用with-grid-settings()（reference docs）来包装您的代码：

由于您不想更改实际的容器宽度，我们可以单独留下。如果你希望.projects填充（来自squish()）受到影响，这取决于你，但我会假设你没有。就是这样，只需更改$gutter-width s的li：

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

就是这样。如果您确实需要其他任何东西来使用调整后的设置，只需将它们移到mixin中即可。

可以覆盖容器的默认装订线值吗？

1 个答案: