可以覆盖容器的默认装订线值吗? [英] Possible to override the default gutter value for a container?

问题描述

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

Is it possible to override the default gutter value for a container with base values e.g. like that:

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

这样您就可以将装订线从 20px 最小化到例如仅 5px 或任何其他所需值，按需.

So that you would be able to minimize the gutter from 20px to e.g. only 5px, or any other desired value, on demand.

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

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

Is it possible via a mixin, would i have to place another container/layout or should i stick with plain CSS to solve that task? Thanks

更新:更具体地说，我不寻找装订线的确切大小(就我目前阅读的内容而言，由于四舍五入，无论如何都很难)，我只想最小化装订线并间接扩大列宽.

Update: To be more specific, i don't look for an exact sizing of the gutter (as far as i read so far, due to rounding, it would be difficult anyway), i just want to minimize the gutter and enlarge the column width indirectly.

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

目前我在包含的 7 列及其排水沟之前和之后压缩了 3 列.到目前为止，列及其图像的宽度太小.因此，我想缩小装订线宽度并间接扩大列宽.

At the moment i have squished 3 columns before and after the contained 7 columns and their gutters. So far the columns and its images are too small in width. Therefor i wanted to size down the gutter width and enlarge the column width indirectly.

Susy 设置看起来像这样:

The Susy settings look that way:

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

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

A container width i haven't set so far since the container is inside a wrapper for the whole page.

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

截图中图像矩阵的具体选择器如下:

The specific selector for the image matrix shown in the screenshot is the following:

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

您需要更多详细信息吗?那么您是否仍然建议使用 with-grid-settings mixin 来解决该问题?set-container-width mixin 真的有必要吗?想过如果我设置相对的东西就不需要绝对值吗?谢谢拉尔夫

You need any more details? So would you still recommend to use the with-grid-settings mixin to solve that problem? And is the set-container-width mixin really necessary? Thought if i set up things relative no absolute values should be necessary? Thanks Ralf

更新 2:

我尝试了下面评论中提到的建议的小秘密方法.但到目前为止，我无法得到一个干净的显示，更像是一个凌乱的拼凑而成"...... ;) 有点令人困惑.基本上文章作者推荐了2个步骤.首先，他为包含元素的内容添加了 -100% margin-right，然后在下一步中将对象推回原位.我在一长串尝试中的最后一次设置现在看起来像这样，但仍然看不到解决方案.

Ufff i tried the suggested little secret's approach mentioned in the comments beneath. But so far i was unable get a clean display, more like a messy chaotic "patchwork"... ;) Kind of confusing over all. Basically the articles author recommended 2 steps. First he added -100% margin-right for the content containing element and in the next step pushed the objects back into their places. My last setup in a long line of tries looks like that right now but still no solution in sight.

 .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);
        }
    }
}

我在包含元素的 with-grid-settings mixin 中放置的 margin-right 就像建议的那样.但问题是在哪里放置 pre mixin，尤其是它应该包含哪些数字(是否也考虑了压缩数字)?所有 li 的值是否相同，还是需要 for 循环将图像单独推送到它们的水平位置?li 元素中的混合顺序是否正确?放在什么地方重要吗?在span-columns和nth-omega的末端或中间?总的来说，我仍然很困惑.网格、图像矩阵和 Susy 仍然让我的大脑旋转.:/

The margin-right i've placed within the with-grid-settings mixin in the containing element for "li" like suggested. But the question is where to place the pre mixin and especially which numbers it should contain (has the number to take the squish number in consideration too)? Is it the same value for all li or is a for loop necessary to push the images to individually to their horizontal positions ? And is the mixin order within the li element correct? Does it matter where it is placed? At the end or inbetween span-columns and nth-omega? Over all i am still confused. Grids, image matrices and Susy still keep my brain spinning. :/

更新 3:

谢谢！我终于让它工作了.最后，我对我的解决方案有两个问题:

Thanks! I finally got it working. In the end i would have two questions about my solution:

 .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; 的情况下仍然有效吗?谢谢！

Would there be a more elegant way for the layout of the for loop? And second why is it possible that this version as well as a version when i comment out the $count: $count + 1; statement lead to the same visual result? Actually commented out there isn't a second and third count up for the push variable. Any idea why that works anyway without the $count: $count + 1;? Thanks!

更新 4:我又玩了一会儿，结果发现下面的版本很有魅力.似乎 $count 变量根本没有必要，以及推送/预混入中包含的值的增量增长.一个简单的 0 成功了.再次感谢您的帮助！！！

Update 4: I played around a little bit more and as it turns out the following version works like a charm. It seems the $count variable isn't necessary at all, as well as the incremental growing of the value contained within the push/pre mixin. A simple 0 did the trick.Thanks again for the help!!!

  .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 部分:https://dl.dropbox.com/u/8578/matrix.mov

I already mentioned in my last comment beneath that the example shown in update 4 hasn't worked as good as it supposed to work at the first look. I tried now to completely rebuild the suggestion from the Palantir article. Underneath is the scss parts for the 7x4 as well as the 3x3 matrix shown in the video: 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 都包含在单独的行中.这是我能得到的最接近的版本.:/现在我不知道如何将这些部分放在一起以获得适当的矩阵.我或多或少地尝试过使用浮动和显示属性的可能性.但没有运气.可能有人有提示吗?

At the first look the matrices look broken but if you take a closer look at the inspector within the video, it appears that each element is pushed to its correct horizontal position in both matrices. Only problem is that each li is contained in separate lines. This is the closest version i was able to get. :/ Right now i am out of ideas how to put those pieces together to get to a proper matrix. I tried more or less ever possibility with float as well as display properties. But no luck. Anyone has a hint perhaps?

推荐答案

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

You can use with-grid-settings() (reference docs) to wrap your code:

由于您不想更改实际容器宽度，我们可以不理会它.如果您希望 .projects 填充(来自 squish())受到影响，这取决于您，但我假设您不这样做.在这里，只需更改 lis 的 $gutter-width:

Since you don't want to change the actual container width, we can leave that alone. It's up to you if you want the .projects padding (from squish()) to be influenced, but I'm going to assume you don't. Here it is, just changing the $gutter-width for the lis:

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

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

That's it. If you do want anything else to use the adjusted settings, simply move them inside the mixin.

这篇关于可以覆盖容器的默认装订线值吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！