CODEWITHSUNDEEP
sasssusy-compasssusy
FlyingNimbus
FlyingNimbus

Reputation: 445

Shorthand syntax gutters being ignored for span mixin

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

Upvotes: 0

Views: 614

Answers (2)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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.

Upvotes: 0

FlyingNimbus
FlyingNimbus

Reputation: 445

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.

Upvotes: 1

Related Questions