可以覆盖一个容器的默认值阴沟?(Possible to override the default g

2019-08-01 18:06发布

是否有可能覆盖缺省值排水沟用,例如像基值的容器:

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

所以,你将能够排水沟从20px的最小化,例如只有5像素,或任何其他所需的值,点播。

.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

目前,我已经被压扁3列前,所包含的7列及其排水沟之后。 到目前为止,列和图像的宽度太小。 为此我想大小下来装订线宽度和间接放大列的宽度。

超对称设置看起来这样:

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

您需要任何更多的细节? 这样,你还会推荐使用与网格的设置混入来解决这个问题? 而且是集容器宽度混入真的有必要吗? 想如果我建立的东西相对没有绝对的值应该是必要的? 由于拉尔夫

更新2:

UFFF我想在下面的评论中提到的建议小秘密的做法。 但到目前为止,我无法得到一个干净的显示器,更像是一个混乱的混乱“拼凑” ...;混淆在所有)类。 基本上篇文章推荐2个步骤。 首先,他补充-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元素内混入顺序是否正确? 不要紧,它被放置? 在结束还是中间跨度列和第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循环的布局更优雅的方式? 其次,为什么是有可能,这个版本以及当我注释掉$计数版本:$计数+ 1; 声明导致同样的视觉效果? 其实注释掉没有第二个和第三个上数推变量。 任何想法,反正为什么作品,未经$计数:$计数+ 1;? 谢谢!

更新4:我打得四处一点点,并为事实证明了以下版本的作品就像一个魅力。 看来$ count变量是没有必要的,以及包含的推/预先混入中的值的增量生长。 一个简单的0再次做了trick.Thanks您的帮助!

  .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所示的例子还没有当过好。 我现在想完全重建从真知晶球文章的建议。 下面是对于7x4的所述SCSS部件以及在视频中示出的3×3矩阵: 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;
                    }
                }
            }
        }
    }
}

在第一次看矩阵看坏了,但如果你把在视频内检查员仔细一看,似乎每个元素推到两个矩阵的正确水平位置。 唯一的问题是,每个L1包含在单独的线路。 这是最接近的版本我是能够得到。 :/现在我的想法是如何把这些碎片拼凑起来,得到一个正确的矩阵。 我试图与浮动或多或少曾经可能性以及显示属性。 但没有运气。 任何人有一个暗示吧?

Answer 1:

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

既然你不想改变实际容器宽度,我们可以独自离开这一点。 这是给你,如果你想.projects填充(从squish()受到影响,但我会假设你不知道。 这,只是改变了$gutter-widthli S:

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

而已。 如果你想别的使用所调整的设置,只需将混入内部移动它们。



文章来源: Possible to override the default gutter value for a container?