When to use sass variables
Hello guys, I'm getting a bit flustered when it comes to refactoring my sass sheets. I'm kind of confused on when to use sass variables, as my understanding of a variable (or even functions) is DRY -- so if you use a value more than once, put it in a variable. But when I have things like mixins, or inheritance, I feel like the line becomes a little blurred and I'm feeling like my stylesheets are becoming a mess. Right now, I have it so that anytime I would use a variable twice (even if it's in a mixin, since I'm using a mixin multiple times for multiple components), I put it in a variable. But if I only use a value once, I'll put it in its respective component sheet. I'm curious to hear what your philosophies are.
17 Replies
Hi 👋
I understand the struggle. I think a design system should be the starting point to find a solution. The idea is, instead adding new variables for new repetitive values, stick to pre-defined values in the design process and its implementation.
Let's take Tailwind CSS as an example. It provides a full design system, but let's stick with the spacing scale:
https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
If this scale (defined in variables in your case) is available for you before you start customizing your component, you will have a place to take you're values from. Instead thinking of creating new variables, you will have to think about updating the scale or the design of the component.
On the other hand, if you think the effort to put this in place is not worthy, I think that it's not necessary to create variables for values you repeat just a few times. You can always edit multiple lines at the same time in your editor. For example: https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor
Basic Editing in Visual Studio Code
Learn about the basic editing features of Visual Studio Code. Search, multiple selection, code formatting.
Customizing Spacing - Tailwind CSS
Customizing the default spacing and sizing scale for your project.
Stop saying tailwind is a design system
It's not!
Brad Frost
Brad Frost
Design Systems are for user interfaces
We often talk about design systems as singular entities. "The design system saves time and increases quality." "Oh, the design system provides that." "Update to the latest version of the design system." The reality is that a design system is a multi-faceted layer cake, and also operates as part of o
Hey Daryl, thanks for the response! I was actually looking into MUI and Tailwind, but the amount of customization I'd have to do wouldn't be worth it so I'm sticking to Sass ;). Plus, if I want to get an entry level job and be a competent developer, I should be able to write clean, maintainable css which is why I put a lot of thought into how I lay out my stylesheets.
Here is a good article on tokens and how Mike uses design tokens https://www.mikeaparicio.com/posts/2020-07-06-simple-groupon/
Simple Groupon
Demonstrating the power of design tokens for a hackathon.
Thanks! I'll definitely check this out
Kevin's SASS course should be dropping sometime soon too. https://www.beyondcss.dev/
Beyond CSS
Take control of your stylesheets with modern CSS and tools like Sass and PostCSS
Oh nice, you think he goes into stuff like this? I feel like it might be a bit outside of a course's scope if the course is just about learning how sass works
It's covered
He will goes a bit into it anyway. Another reason the name is not sass stuffs
Cool!
Not going to lie, most of this went over my head 😂😂 but I'm going to look up design tokens since I see them a decent amount
Sorry probably less help and more of a rabbit hole. That's my fault cause it's more to the point Tailwinds not a design system 😂.
It's just providing you set variables with values. Kinda to what Daryl's point though you would do the same in sass
Get all your spacing, colors, typo, set up in vars. Then you can set contextual tokens and stuff with them
No I love going down rabbit holes honestly. The amount of rabbit holes I've gone down in the past couple weeks has been insane but it makes me a better developer. I'm honestly super excited to dive in and learn about design tokens so I can refactor a bunch 😂
Part of the point of having good token's is not having to refactor components for a new design.
Good design system period for that matter
Yup, sounds like a great topic to dig into so I can nail the current project I'm on
I appreciate you guys!!
Gl !
I think this makes completely sense. Thanks for sharing!
I took the scale Tailwind provides as an example. If you continue with Sass, that's perfectly fine. Good luck!
Great resources! I know a lot more than I did yesterday about all this stuff now. Going to read Atomic Design which is Brad Frost's ebook seems really interesting
Well after reading Atomic Design I need to refactor my whole ui mockup, create a pattern library, a style guide, and anything else a design system needs 😂 😂