Question

我为susy设置了全局设置：

[]

我想覆盖几个跨度的装订线

$susy: (
    columns: 8,
    gutters: 1/4,
);

生成的css

.tile-left {
    @include span(1 of 2 1px);
}
.tile-right {
    @include span(1 at 2 of 2 1px);
}

我也试过这些，但这些似乎都不起作用

.tile-left {
  width: 44.44444%;
  float: left;
  margin-right: 11.11111%;
}

.tile-right {
  width: 44.44444%;
  float: right;
  margin-right: 0;
}

＆安培;

@include span(1 of 2 no-gutters);

Answer 1

看起来像＆＃34; 1px＆＃34;参数不起作用，因为排水沟只能用比率值来定义; Documentation

此外，我已经解决了我想要流体元素和静态排水沟的问题这样做：

.tile-left {
    @include span(1 of 2 (gutter-override: no-gutters, gutter-position: inside-static));
    border-right: 1px solid #E5E5E5;
}
.tile-right {
    @include span(1 of 2 (gutter-override: no-gutters, gutter-position: inside-static));
}

当您通过传递＆＃34; gutter-override：no-gutters＆＃34;来移除排水沟时它用排水沟计算宽度，然后去掉边距;通过传递＆＃34;排水沟位置：内部静止＆＃34;在没有排水沟的情况下，计算结果为100％。

Answer 2

在你的帖子中你并没有完全明白你想要实现的目标。 @include span(1 of 2 no-gutters);应删除装订线输出，但不会更改数学。如果你的目标是改变数学，那么没有排水沟，@include span(50% no-gutters);可能是最好的选择。或者@include span(1 of 2 (gutters: 0));应该给你相同的输出。

更新：即使@include span(1 of 2 0);似乎也有效。 0被理解为有效的排水沟比率。

span mixin忽略了速记语法gutters

2 个答案: