Open yahyaerturan opened 5 years ago
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
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.
@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?
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.
+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.
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.
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:
rgb(--my-var);
and similar expressions correctly.Thank you @yahyaerturan for the gist! Assuming this will be fixed in node-sass, would you still need a sass version of the library?
@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.
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.