Any alternative to repeatedly importing your SASS color palette?
Hi everyone, I'm working on a svelte project with sass.
I have a partial
_colors.scss that has a general palette used in multiple components.
As the project grows, the number of @use colors will increase.
For testing, I added @use colors/typography/themes to a component that doesn't need any of them.
In Chrome DevTools: Coverage tab I noticed that this increases the resultant css file, as well as the unused CSS percentage.
So I assume it's bad practice to repeatedly import a partial such as _colors.scss into multiple components. Is the best alternative using css var() instead? I do like the brevity of a simple $gray over custom properties.3 Replies
this might be a good time to sit back and think about how you are writing your css
1. Why are you declaring colours in multiple files etc.
2. how often are you adding colours to things,
3. should you be doing this or should you be handling colours of things all in one file?
i.e. all borders should be the same colour, all cards are the same colours - these could all be handled in one file.
4. should you have more classNames that you sprinkle around rather than more css ?
thinking about your approach should save you time and minimize complexity
How are your colrs being declared? Because if they are simply variables, they won't be compiled into anything, so if you
@use it 100 times but never actually use any of them, it shouldn't have any impact on the file size
I do agree with Carl too, part of it could be a slightly different approach to how you're approaching things, but I do tend to end up with an @import '../abstracts in most of my .scss files.
If they are all "abstracts", as in, all things that aren't compiled (variables, mixins, functions, maps, etc), then it should have no impact on anything, it's just making those things available to use within that file.Thanks for the replies guys!
@Coder_Carl
1. I have some colors I want to use in certain components, for example a card with an accent text color that matches the color in the navigation.
2. Trying to apply them sparsely and minimalistically (think medium.com type of blog). There's a lot of colors needed for certain interactive pages, but the global colors are ~10 for now.
3. Thought it would be more maintainable to keep all the color properties of a component within that component's css, scoped tightly but not requiring a repeat in code.
4. Great point, I noticed I have a lot of manual css as opposed to classes. For now it's working, as I'm setting things on a global scope to be consistent before going into specific cases (i.e. all links should have the same underline, override in nav).
@Kevin
I wonder if the differing file size was a dev environment thing that would have been trimmed out in a production build. First time using svelte.
I actually did use the 
ended up going with CSS custom properties after reading more into it, and the thought of not having to import just feels refreshing/safe to me haha (this was before Kevin's message). I referenced Adam Argyle's video on Creating a Color Scheme to set up a basic light and dark mode and so far everything is clean and easy to read 🙂
abstracts approach as you had in one of your videos on another project, with the clr(text, dark) function and such ended up going with CSS custom properties after reading more into it, and the thought of not having to import just feels refreshing/safe to me haha (this was before Kevin's message). I referenced Adam Argyle's video on Creating a Color Scheme to set up a basic light and dark mode and so far everything is clean and easy to read 🙂