0

I've set global settings for susy:

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

I want to override the gutters for a couple of span

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

Generated css

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

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

I've also tried these and these don't seem to be working either

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

&

@include span(1 of 2 (gutter-override: 1px));
FlyingNimbus
  • 453
  • 2
  • 5
  • 11
  • "1px" doesnt work because argument must be a ratio, but I still wonder if theres a way to get the columns in % and the gutter in static px – FlyingNimbus Jun 18 '15 at 21:13

2 Answers2

1

Looks like the "1px" argument didnt work because gutters can only be defined by a ratio value; Documentation

Furthermore, I've solved my issue of wanting fluid elements and a static gutter by doing this:

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

It looks like when you remove the gutters by passing "gutter-override: no-gutters" it calculates the width with gutters, but then removes the margins; By putting the gutters/margin inside by passing "gutter-position: inside-static" the with is calculated to span to 100% without gutters.

FlyingNimbus
  • 453
  • 2
  • 5
  • 11
0

It's not entirely clear in your post what you are trying to achieve. @include span(1 of 2 no-gutters); should remove the gutter output, but won't change the math. If your goal is to change the math so there are no gutters, @include span(50% no-gutters); might be the best option. Or @include span(1 of 2 (gutters: 0)); should give you the same output.

UPDATE: even @include span(1 of 2 0); seems to work. The 0 is understood as a valid gutter ratio.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Yes I wanted to change the math, I wanted my span to be 50% with 1px. I guess I want my spans in percentages and my gutter to be static 1px with the math filling to 100%. If I use "gutter-override" to override the gutters with to 1px, the math doesn't calculate based on the new gutter width and doesn't add up to 100%. – FlyingNimbus Jun 23 '15 at 23:09
  • CSS doesn't allow combining static `px` margins with fluid `%` columns to get `100%` — unless you use `calc()` (no need for Susy in that case). Your other option is to move your gutters to padding instead of margins (use `no-gutters` and add the `1px` padding manually). – Miriam Suzanne Jun 29 '15 at 23:21