search

notwaldorf / ama

:raising_hand: Ask @notwaldorf anything!
94 stars 13 forks source link

Using Sass with Polymer 3 #89

Closed rudidude86 closed 6 years ago

rudidude86 commented 6 years ago

First of all, thank you for everything you do for the community. Your talks on YouTube are a perfect mix of helpful and entertaining, and they make complex topics much more accessible for dummies like me.

My team and I have been dipping our toes into custom elements the past few months, and we created a small search app comprised of a few custom elements (using Polymer 2). One thing that kept weirding me out throughout development was hand-authoring all the CSS for each element in a <style> tag in the element. My team has a pretty nice visual style library used elsewhere on our website, built up out of modular Sass mixins and partials, and we'd love to be able to leverage some of those existing patterns and syntactic sugar when creating and maintaining styles for custom elements.

I got re-energized from the Polymer talks from this year's GoogleIO, and decided to work on upgrading our app to Polymer 3. As part of that effort, I was hoping to also try to refactor our existing hard-coded styles into Sass files that get compiled into a handful of CSS files, whose contents each get slurped into each respective custom element.

I see that the PolymerX skeleton project uses .pcss files. Can I do a similar thing with Sass-compiled CSS files instead? Importing a .css file directly doesn't seem to work...

Rob Dodson mentioned using Sass in a 2016 episode of Polycasts, but those tools seem to be specifically for Polymer 2.

Any advice you can provide or resources you can point me to about using Sass with Polymer 3 would be extremely helpful. Thank you again for all you do!

notwaldorf commented 6 years ago

I don't know what PolymerX is -- we don't maintain that and I've never seen this before. I personally have never used Sass/Less/Any non-css flavours/, so I don't really know what the good answer is here (you might want to ask on the Polymer slack channel or stack overflow, since someone must have tried this before). I think the punchline in whatever solution you do use is to transform your Sass into CSS in one step, and then importing that built css file into your element.

If you look at the reusable styles in Shop, for example, they innerHTML a dom-module (code) containing all the styles. In your case, the content of this style would be your built css. You could do all of this in a build step with gulp or something (sass -> css -> wrap it in a dom-module). The styles are then used as a style include.