The demo doesn't show any angled edges on Firefox

[gb444]

I just tried to view the demo on Firefox (46, on linux) and nothing shows up, as the screenshot shows.

Inspect says "cannot load image" when you hover over the url, but that could just be a normal thing for data urls.

[pygy]

Likewise for FF47 and FF dev edition v48 on OS X.

[omgmog]

This is caused by using hex for the fill rather than rgb, I encountered the same issue when I wrote about the subject back in 2014.

You could convert the fill color to rgb quite simply by breaking it up in to it's component red/green/blue parts and then assembling it again as rgb():

$red: red($color);
$green: green($color);
$blue: blue($color);

fill="rgb($red, $green, $blue)"

[pygy]

Alternatively, percent encoding the '#' to '%23' works as well, but I don't know how to do that in SASS.

It is well known and the report has been deemed invalid.

[josephfusco]

Thanks @omgmog.

This does fix Firefox, however just noticing now it breaks the use of color functions such as darken() and lighten()

@include angled-edge('outside bottom','lower right', darken(#EE3924,5%));

decoded outputs to:

<svg xmlns='http://www.w3.org/2000/svg' height="100" width="1500" fill="rgb(230.59958,40.01271,17.90042)" fill-opacity="1"><polygon points="0,0 1500,0 0,100"></polygon></svg>

[omgmog]

Hmm that seems like a quirk of Sass in that case -- red(), green() and blue() should be evaluating the $fill and returning a whole number from 0-255 for each.

Do you see the same issue if you first assign your darken(#EE3924, 5%) to a variable, and then pass that variable through as $fill?

[josephfusco]

Same issue assigning to variable first. Hmm.

[omgmog]

Alright I've had a play with this in both Sass and Libsass, and it only happens in Libsass. Demo here: http://www.sassmeister.com/gist/e9eeb2187e81f24da7afe8d7ad17c4a2

If you change the Compiler in the "Options" dropdown, and make a small code change, you can validate the difference between Sass and Libsass

[josephfusco]

I was also just playing around with it here http://www.sassmeister.com/gist/b3574a75b09f94c4d29a70142c7a1714
Yeah looks like libsass. Although overkill, I am using gulp-sass to compile for the demo branch.

[omgmog]

You could wrap each of the calls to red() green() and blue() with ceil() to fix this across the board.

[josephfusco]

Perfect. Thanks for your assistance on this.

[easherma]

I've seen this break when trying to pass a CSS color variable in:

Error: argument `$color` of `red($color)` must be a color
        on line 102 of node_modules/angled-edges/_angled-edges.scss, in function `red`
        from line 102 of node_modules/angled-edges/_angled-edges.scss, in mixin `angled-edge`
        from line 130 of src/css/_site.scss
        from line 93 of src/css/main.scss
>>      $fill-rgb: 'rgb(' + round(red($fill)) + ',' + round(green($fill)) + ',' + r

For @include angled-edge('outside bottom', 'lower right', var(--primary));

[omgmog]

@easherma When compiling from SCSS to CSS that var(--primary) doesn't turn in to the color, it just stays as var(--primary), so it's not a valid argument for the mixin. CSS variables are evaluated at run-time, not compile-time.

[easherma]

Is there a workaround to allow for that kind of usage?

[omgmog]

Is there a workaround to allow for that kind of usage?

In short -- no.

This mixin generates an SVG background image dynamically, you could probably replicate that behavior with a bit of JavaScript if you wanted it to be dynamically associated with a CSS var() declaration.

Take a look at the source of the mixin or the generated CSS on the demo