Alex
KPCKevin Powell - Community
•Created by Alex on 7/5/2024 in #front-end
Theming system with SASS
Hello Kevin, thanks for answering
I'm already using maps and loops but in a more intricate way.
Here's how my system works: Sass Playground
What I posted is only a portion of it, two things to notice mainly:
1) Properties make no sense. That's because my framework actually uses a subset of CSS (W3C CSS version 2.1 with some additions from current work on version 3.), so I have a function that translates keys in the maps to the correct properties (e.g.,
P.S: the
bg-color is background in CSS but -fx-background-color in my framework)
2) The framework allows defining custom pseudo states, like with-icon-left
3) I did not post some functions as they are irrelevant. For example: ApplyMDStateLayer just takes the color from the scheme and adjusts its opacity according to the needed state. GetStateLayer retrieves the opacity value from a map for the desired state.
As you can see in my code, a button can have many variants (at least in Material Design 3), which means that making a single map for every theme and every variant may make things a bit messy
Although, I could and probably should separate every variant in another scss file. (e.g., _buttons_filled.scss, _buttons_filled_tonal.scss,...)P.S: the
$base-styles map contains only properties relative to layout, shape, size, position. Colors are 99% sure to change depending on the theme, while the others…well I don't know to be honest, so I consider this organization still WIP.
Thing is, I'd really like for my project to support multiple themes one day, and give my user base choice. But I don't know why, this much complexity feels so wrong 😅5 replies