Sass version?

[yahyaerturan]

Hi,

A very good library thank you. I am using webpack and I can't include the library as usage of var in your css.

Would you be able to create a sass (scss) version of this library? I believe it will make the library even more popular.

[finnhvman]

Hey @yahyaerturan,

Is that so? Isn't CSS fully valid SCSS? I did a quick test on CodePen and the SCSS compiled with CSS variables. Is the behaviour you referred documented somewhere?

Thanks

[yahyaerturan]

These parts (combine usage) throws error if we want to compile it through sass processor.

i.e. var(--matter-ontheme-rgb, var(--matter-onprimary-rgb, 255, 255, 255));
i.e. rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38);

Beside compiling, it would be really nice to have a central _variables.scss file so we can tweak style to fit our project smoothly.

Thanks fy time.

[finnhvman]

@yahyaerturan Thanks, now I understand the problem. You mention _variables.scss. Does this mean you don't need runtime variables, only compile-time variables?

@DevFelixDorn I'm glad you found a way to use the buttons, but I guess that's still not the easiest way to integrate. The question above applies to you as well. Can you answer, please?

[DevFelixDorn]

I think compile-time variable can be a good way, it can be easy to understand (e.g)

// $on-primary can be defined on _variables.scss
.matter-button-contained {
color: $on-primary;
} 

Than this current code (I say that but your library is so great!)

--matter-helper-theme: var(--matter-theme-rgb, var(--matter-primary-rgb, 33, 150, 243));color: rgb(var(--matter-helper-ontheme));

Another things, with scss, maybe you can use generic class : .matter-button and .matter-button-contained extend to .matter-button because a lots of things is the same with contained button, outlined button, and with this system, if a person read the code, I know exactly what is personal for this button , and what's the common style to every button (e.g) min-width:64px; in generic class color: $primary; border: none; on .matter-button-text.

[yahyaerturan]

+1.

Instead of var(--name, 'value'), it's more useful to have Sass variables like $matter-font-family: "Roboto, ...".

I made a preliminary work to convert it to scss through online converters but still using root variables, and it is not optimized of course. https://gist.github.com/yahyaerturan/500cb7acc45e6e730a0494a820f502bf

Hope to have a sass version.

[web-padawan]

it's more useful to have Sass variables like $matter-font-family: "Roboto, ...".

You can still have Sass variables with custom CSS properties as values, see example.

[finnhvman]

The problem @yahyaerturan described is actually an issue in node-sass. I hope they'll fix it sooner than later.

Until then, I see two solutions:

1. Use dart-sass instead of node-sass. Dart-Sass is the primary implementation of Sass in pure JS/Dart. It handles the rgb(--my-var); and similar expressions correctly.
2. Try @yahyaerturan's workaround: https://gist.github.com/yahyaerturan/500cb7acc45e6e730a0494a820f502bf

Thank you @yahyaerturan for the gist! Assuming this will be fixed in node-sass, would you still need a sass version of the library?

[yahyaerturan]

@finnhvman Glad to be useful somehow :) But I still believe, having a proper sass version of this library, will get more attention and make it more popular - I believe this library deserves it. Developers who want to import only button or checkbox, or those who want to create own their colored/mixin buttons, or those want to change default padding/color/font, sharing those variables with their in-use frameworks, styles, etc. In any case, I think having a sass version is plus. Not essential, but surely a plus. Thanks for the library again.