Article: Using Sass with Custom Elements

[ebidel]

I've been using Compass on a few different Polymer projects for a while now. In fact, I've been meaning to write an article on the topic.

My approach has been to create an _elements.scss file that elements can reuse in their own stylesheets.

The two gotchas I've ran in to:

1. The sass compiler barfs on ^ and ^^ selectors. Bug filed.
2. Be careful if you're compiling such that comments are removed. Any rules with /* @poyfill */ will be stripped out. I've mostly avoided this by include these advanced rules in an inline <style> in the element.

https://groups.google.com/forum/#!msg/polymer-dev/gNlsZDltpUY/QZEYYsrdOvwJ

[Nevraeka]

A simple set of mixins and a css parser tool might be a good investment. I'm looking into this on my own for sass on a project I am on. On a SASS project for spriting I used a Java Jar file called Smart Sprites ( a bit old now though - so not this tool per se) that parsed css comments based on keywords similar to @polyfill type comments. Different use case but similar idea. I am running into the same issues with the cat/hat as well. Thanks for investigating Eric.

[robdodson]

I'm working on this for the Yeoman generator so I could take a stab at writing up an article.

[HansUXdev]

Maybe this is a silly question.
But is possible to write a custom element that supports sass as native similar to how the <app-router> element adds the attribute import="name.html"?
For Example: <link rel="sass" href="/sass/elements.css">

Or an element that simply writes the compiled css into the <style> tag?

[ebidel]

Custom elements can do anything :) I know LESS supports clientside
compilation, but doing so is slow and introduces major FOUC. I'm not sure
it would be a great recommendation.
On Aug 25, 2014 6:27 PM, "Hans" notifications@github.com wrote:

Maybe this is a silly question.
But is possible to write a custom element that supports sass as native
similar to how the element adds the attribute
import="name.html"?
For Example:

Or element that simply writes the compiled css into the <style> tag?

—
Reply to this email directly or view it on GitHub
#78 (comment).

[arthurevans]

Ping @robdodson @ebidel is this still relevant or can we close it out?

[ebidel]

We can close

On Wed, Feb 10, 2016, 7:19 AM Arthur Evans notifications@github.com wrote:

Ping @robdodson https://github.com/robdodson @ebidel
https://github.com/ebidel is this still relevant or can we close it out?

—
Reply to this email directly or view it on GitHub
#78 (comment).