2

是否可以使用基本值覆盖容器的默认装订线值，例如：

$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 来解决该问题？set-container-width mixin 真的有必要吗？想过如果我设置相对的东西就不需要绝对值吗？谢谢拉尔夫

更新 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);
        }
    }
}

我已将margin-right 放置在“li”的包含元素中的with-grid-settings mixin 中，如建议的那样。但问题是在哪里放置 pre mixin，尤其是它应该包含哪些数字（是否也考虑了 squish 数字的数字）？所有 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 的 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 都包含在单独的行中。这是我能得到的最接近的版本。：/现在我不知道如何将这些部分放在一起以获得适当的矩阵。我或多或少地尝试了浮动和显示属性的可能性。但没有运气。有人可能有提示吗？

4

1 回答 1

1

您可以使用with-grid-settings()（参考文档）来包装您的代码：

由于您不想更改实际的容器宽度，我们可以不用管它。如果您希望.projects填充 (from squish()) 受到影响，这取决于您，但我假设您不会。在这里，只需更改$gutter-widths li：

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

而已。如果您确实想要其他任何东西来使用调整后的设置，只需将它们移动到 mixin 中。

于 2012-10-24T06:35:30.080 回答