susy sass 的不同排水沟

Question

我有这个麻烦的设置：

$susy: (
  columns: 8,
  gutters: 1/4,  
  global-box-sizing: border-box,   
);

有时我需要不同的排水沟而不是 1/4。

例如看图：

代码：

.wrap {  
  @include clearfix; 
  @include container (500px); 

  .box-1 {
    @include span(4 of 8);
  }
  .box-2 {
    @include span(4 of 8 last);
  }
  .box-3 {
    @include span(4 of 8 wide no-gutter);
  }
  .box-4 {
    @include span(4 of 8 last);
  }

  .box-5 {
    @include span(3.95 of 8 wide no-gutter);
  }

  .box-6 {
    @include span(4 of 8 last);
  }
}

我试过了没有成功：

@include span(4 of 8 wide (gutter-override: 2px));

我找到了修复它的方法，但是否正确

@include span(3.95 of 8 wide no-gutter);

谢谢

Answer 1

您可以像这样更改布局

@include with-layout(12 1/8 fluid float after) {

  .box-5 {
    @include span(2 of 12);
  }

  .box-6 {
    @include span(10 of 12 last);
  }

}

其中 1/8 是装订线宽度。

Answer 2

另一个解决方案：

.box-5 {
   float:left;
   width: span(4 of 8 wide) - 1%;
}

.box-6 {
   float:right;
   width: span(4 of 8);
}

susy sass 的不同排水沟

Different gutters with susy sass

sass

susy-compass

susy

compass