Theming system with SASS
Hello everyone,
I'm a newbie in frontend stuff. To be fair I've never worked for the web, I'm more of a backend guy. A few years ago though I discovered I kinda like designing UIs.
I have a desktop project for which I decided to use SASS to style my components.
I studied and took some notes on SASS, I'm using the 7-1 pattern
My main goal is to port Material Design 3 to the desktop.
However, I was thinking, what if in the future I want to use other designs, like Nord, Catppuccin, Flat, Fluent, etc...
Let me express my doubts through an example.
Let's consider a button.
Material Design makes buttons round, there are many variants, uses ripples and so on...
On the other end other designs make the button a rounded rectangle, do not use ripples, some may not rely on background color for the interaction states but rather the border.
In simpler terms, each design may define a completely different styling structure.
Do you think it's possible to implement a system, without duplicating the components scss files for each theme? How would you do it?
My current system uses maps to define the styles for each theme, and there is a mixin for each design system and variant of the component, all in the same component's file, if you want to see the code let me know, there is actually a lot going on
I'm a newbie in frontend stuff. To be fair I've never worked for the web, I'm more of a backend guy. A few years ago though I discovered I kinda like designing UIs.
I have a desktop project for which I decided to use SASS to style my components.
I studied and took some notes on SASS, I'm using the 7-1 pattern
My main goal is to port Material Design 3 to the desktop.
However, I was thinking, what if in the future I want to use other designs, like Nord, Catppuccin, Flat, Fluent, etc...
Let me express my doubts through an example.
Let's consider a button.
Material Design makes buttons round, there are many variants, uses ripples and so on...
On the other end other designs make the button a rounded rectangle, do not use ripples, some may not rely on background color for the interaction states but rather the border.
In simpler terms, each design may define a completely different styling structure.
Do you think it's possible to implement a system, without duplicating the components scss files for each theme? How would you do it?
My current system uses maps to define the styles for each theme, and there is a mixin for each design system and variant of the component, all in the same component's file, if you want to see the code let me know, there is actually a lot going on
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
