Comments (8)
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.
from matter.
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:
- 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. - 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?
from matter.
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
from matter.
@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?
from matter.
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.
from matter.
+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.
from matter.
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.
from matter.
@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.
from matter.
Related Issues (20)
- Alignment issue with Switch without text HOT 7
- Element Select and scale element as bootstrap .input-lg, .input-sm, .col-lg- *, and .col-sm- * HOT 4
- Question : Change size input
- Checkbox and Radio button styling
- Publishing on npm HOT 1
- Problem with version of browser
- Slider present in codepen but not in bundle file HOT 3
- Is this project alive? HOT 4
- can you give me tabs component? HOT 1
- Add a full demo page
- Can you add card ? HOT 2
- Add cards component HOT 4
- Matter 2
- Not an issue, but there are official Google pages using Matter HOT 2
- a mistake
- matter-progress-circular doesnt seem to work with values HOT 1
- Possible typo in selector HOT 1
- Sizing guidelines HOT 1
- Changing colors HOT 3
- Request for add new component HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matter.