0

In SUSY v1.x, writing:

.content {
  @include container;
}

compiled as

.content {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.content:after {
  content: " ";
  display: block;
  clear: both; 
}

now, in SUSY 2.0 it compiles as 

.content {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.content::after {
  content: " ";
  display: block;
  clear: both; 
}

The issue being the two colons in the after pseudo element. A single colon works in all browsers, including IE8 - so I'm wondering: 1) if this was an intentional change or an oversight, as two colons drops support for IE8 and 2) if there's a workaround without writing out all the extra CSS for IE8 "containers".

Krispin Dolbear
  • 1
  • 1

2 Answers2

0

Two colons is "correct" according to the standard, but I was not aware that it isn't supported by IE8. Please file a bug report on GitHub, or submit a patch, and I'll get that reverted asap.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
0

I wrote this as a workaround for IE8 projects. Since that browser is on its way out, I think this could be preferable to rewriting your code to be incorrect under current standards. Maybe just add the workaround for IE8 to the documentation?

$susy: (
    use-custom: (
        clearfix: true,
    )
);
// define custom clearfix because default uses ::after which doesn't work in IE8
@mixin clearfix() {
    &:after {
        content: " ";
        display: block;
        clear: both;
    }
}
Krispin Dolbear
  • 1
  • 1