Am I refactoring unnecessarily?
We have some base styles created by .js config files through Tailwind (media query values, colors, etc) and then compiled automatically into css variables.
We have a .js file like this:
And then we use it in our breakpoints like this:
There wasn't documentation on this from what I know and only learned how this actually works through asking one of the leads. I tried
ctrl + shift + f and couldn't find where something like "screens.lg" was being declared (because it's being initialized inside an object so it's hard to search for).
I ended up just redefining these separately as Sass vars:
30 Replies
My question is if I'm creating unnecessary complication doing this? This makes it easier to understand how it works without needing to know beforehand (you can just
ctrl+shift+f and find the declaration), but now there's a split between the old way and the new way that I haven't cleaned up yet.
I did add comments in my Sass file about how it actually works, what's happening and why I did it etc but don't know if I'm just making more work
It's definitely easier for me and saves me time typing lol, and I'm one of like 2 people working on this project so I don't think it's too big of a deal either way but I'm trying to do it 'the right way' I guess. I don't want to be that junior that changes things around for no reason lolyikes! tailwind v2
Ya lol
how about you use a mixin for this?
the map can still be generated by js, but you then don't even need to know what each size is - because it isn't too important
What should that look like?
like what bootstrap does, but less complicated
I'll look into how they do that 👀 for now I thinks what I have is pretty decent
it is pretty decent
So you don't think it was an unnecessary / junior refactor? lol I know you're way more senior than me
I showed my lead it and she thought it was pretty cool but 🤷♂️ don't know if she was being nice 😂 It does seem more maintainable
you can make a map with all the values and then just do a mixin that gets the value from the map
and you can have a mixin that generates the media query too
Okay I see so they're linked together instead of separate. That makes sense I wasn't sure what you meant earlier
saves you a ton of work later
yup, and so you can refer to it by name
you cant do
$#{'sm'} or something
so you need the mapI'll try to circle back to that and lyk how it goes cause I was trying to at least do something simple like $token: --token but it wasn't working since css vars aren't available in sass, did you mean the other way around?
--token: $token?
you can do that, but no
im talking about a map, in sass
like how you have in js
but in sass
Yea I'll have to look it up, I've only heard of them I've never used them 😅 let me get back to you on this 🙏 ty
you're welcome
Sooo did you mean something like this?
If so I still don't think this will work because I tried directly doing
$mq-small: var(--screen-sm) and it wasn't working. Let me try that specifically in a codepen and see if it was a config issue on that specific project or because css vars aren't able to be put in sass vars
Ohh that's where the interpolation comes from that you mentioned earlieryou can't use css variables in media queries
Right
what i meant was this:
Ohh then what's the point of even doing that?
if you make a mixin, you can do something like this:
Why not just do
@media (min-width: $mq-sm)?you also can
you can also do
@media (min-width: mq("sm"))
if you decide to write it as a function
which can be useful for you to control which breakpoint something is atSorry lots of questions 😅 so when would i actually want to use something like this? If I write it in a mixin it would probably be a little clearer just because it's named a bit better?
imagine you need the breakpoint + 10px because something is being an idiot and breaking the layout
or you need to limit the maximum width of the "main" element
So instead of adding calc everywhere you just add it to the mixin instead?
or just get the value
Hm okay writing a codepen will see what i come up w 🤔
try it