How use Sass with Web Components?

Great question. Have you considered using something like Gulp or Grunt to inject your compiled Sass into your component templates? I suspect a similar functionality that is used in Addy Osmani's "Critical CSS" Grunt task may be a good place to start. There is another Github Gist that discusses a similar concept for Jekyll. I suspect the process wouldn't be much different for Web Components.

There is a Gulp Basics here on Treehouse that may helpful. I'm definitely interested in where this conversation leads.

Oh thats nice, maybe something like the {% asset critical.css %} of Addy Osmani would be the key...

I'm using Gulp right now, and the idea of embed the css resulting of compile the .scss file, within our <style> tag located in our component.html looks awesome but at the same time scary for me.

All the time trying to avoid the inline css ( ok email exception ;) ) and now, is gonna be this the right way ? A inflection point in the good practice of web development.

Hugo use something similar with React http://hugogiraudel.com/2015/06/18/styling-react-components-in-sass/

Web component are still a baby, and the community need more time to try and try. but i hope some Polymer developer (or similar) publish some article with a new sass/web-component approach, not only focus in the js, as i saw until now.

lets see how evolve this conversation, and if curious like us got something clear enough :)

I've never used web components before, so I just want to make sure I'm understanding you correctly. If you use a web component on a page, it doesn't have access to the CSS styles and classes that the main page has linked?

Hi Colin Marshall , web components are like .html partials that you import within your main .html file (probably called index.html)

That web components are not affected by the style.css that you apply to your index.html file They have his own styles in each partial. The keyword here is encapsulation. Check about the Shadow DOM: https://www.polymer-project.org/0.5/platform/shadow-dom.html

My question is about how to create a useful workflow with web components and sass, and the best way to add the style into the partials ( @import, inline, other unknown way ) for achieve the best performance in the development process AND && in the web on production.

This is a very interesting question. Remember that Sass is a precompiler and anything live is compiled into normal css. So if you want a variable like $color to be used in any component, it has to be at the development phase. I would not be very portable without specific instructions to the downstream user or strict naming conventions followed in future projects.

That said, I think of this issue as one similar to jQuery. When you use jQuery, you have to install the specific CSS to make it work right. I would think this is the same. You have to install the component CSS with the component. You could do this by having an .scss file that you include in your master .scss that is compiled. Then have a variable at the beginning of the component .scss file that you could set to the equivalent variable of the master project if they are not the same. As far as automating that task, I am not sure how you would do it without knowing the names in advance.

I also edited to comments to answers.

Hi Ted Sumner i want a master .scss file (like always! :) )but as i see until now, with polymer for example, everybody is using inline css in order to make reusable components.

And other point is that the components didnt use the style.css or application.css because they run within the shadowDOM https://www.polymer-project.org/0.5/platform/shadow-dom.html them css rules are independent.

This is what i understood, maybe i'm wrong.

The whole idea behind web components is reusability. Normally inline CSS is a bad idea from a development point of view, however when it comes to web components it is used to limit scope. For example, if I create a web component that contains a list ul li etc and I want to style it in a particular way by default, using inline styles within the component allows me to do that without having to worry that another developer that has created their own list styles for their site which will mess up the appearance of the list in the component I have created, when they use it in their site. My styles wont leak out of the component and the parent site styles wont leak in. That said, the inline styles of my component can be overridden if a developer decides to do so.