Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Polymer mixin syntax is incompatible with Sass

See original GitHub issue

From https://github.com/Polymer/polymer/issues/1373:

Running the following through the Sass compiler:

:host {
  --my-toolbar-theme: {
    background-color: green;
    border-radius: 4px;
    border: 1px solid gray;
  }
}

Results in:

:host {
  --my-toolbar-theme-background-color: green;
  --my-toolbar-theme-border-radius: 4px;
  --my-toolbar-theme-border: 1px solid gray;
}

Which is obviously unwanted.

Reference: https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins

Issue Analytics

State:
Created 8 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

mprinscommented, Sep 10, 2015

–my-toolbar-theme is not a valid selector, so it’s not handled as such, you need to escape it in scss to get what you want:

--my-toolbar-theme: #{'{
    background-color: green;
    border-radius: 4px;
    border: 1px solid gray;
}'};

Top Results From Across the Web

Sass mixin that references parent styles - Stack Overflow

We can reference parent selectors using the ampersand & but do we have a solution for referencing parent styles? I'd like to be...

mixin and @include - Sass

Overview; Passing Arguments to Content Blocks. Indented Mixin Syntax. Mixins allow you to define styles that can be re-used throughout your stylesheet.

Use custom properties - Polymer Project

Using CSS mixins, an element author can define a set of CSS properties as a single custom property and then allow all properties...

Mixins for Rem Font Sizing - CSS-Tricks

For those using Sass, I wrote a mixin to handle rem conversions a ... box should be 4 times a variable baseline (16),...

Sass with Polymer in production - Toaster

Sass is an integral component to our workflow here at Toaster. We utilise Sass to ... Therefore we have come up with a...