Sass Mixin vs Extends
I had a quick question I wanted to ask regarding this.
I have some files in a shared directory that I want to namespace.
I want
_forms.scss to have reusable styling that I can use in other classes around the codebase. I don't need any argument features that mixin supports - I really just need it to work like extends. The problem is, I can't namespace extends. So if I try to do:
This doesn't work. I can however do this with mixins:
The problem is, this is leading to single line mixins:
My question is, is this a totally valid use case, or am I in the complete wrong direction and I should quit as a webdev? 😂59 Replies
I was really worried about duplicate css, but the Sass documentation does allieviate my concerns a bit:
Most web servers compress the CSS they serve using an algorithm that’s very good at handling repeated chunks of identical text. This means that, although mixins may produce more CSS than extends, they probably won’t substantially increase the amount your users need to download. So choose the feature that makes the most sense for your use-case, not the one that generates the least CSS!
🤔 i think you're worrying about the wrong thing
wym?
you're worrying about having single-line mixins when you have single-use mixins
They're not single use
it does look like it
I just didn't show the whole example
Nah this is just an easy example I whipped up
do you have a more concrete example?
Brb putting up a tv lol might take me a while
lol, take your time
why the long name?
why single-letter names?
I've got it in one
shared/_forms.scss style, and I didn't want to abstract another layer so I just prefixed it with commerce-
Single letter, idk i've just been doing that. Like all my tokens I do @use "@tokens" as t
Might be better to make it tokens and forms respectively but with the longer variable names like commerce-form-input I'm glad I don't have to write forms.commerce-form-input hahayou know what's shorter?
commerce-form.inputI was trying to avoid premature abstraction (and the reason I'm saying that is because once I get to the point where I'm naming files like that I usually abstract to a level deeper and put it under something like
forms/commerce)
But since I don't have any other form mixins right now, I can just rename it to commerce-form like you're saying🤔 im curious to see the final result
Appreciate you talking through this with me epic
I think I've been thinking so much about design systems and things I'm really overcomplicating things
I literally just refactored pretty much everything here - I had these commerce components mixed out between several files for titles, layouts, buttons, etc - so I ended up just merging everything in one
_commerce.scss partial. I removed the mixins, and literally just made them classes. I still might use a mixin or two because of that weird use case i talked about in #off-topic.
I think I was trying to combine a sass-only approach with utility classes and it just was a weird almagamation. either one or the othersomething you need to learn: you can use an
_index.scss to automate including all scss files in a folderYou're talking about @forwards?
no, import
it's fine to mix both
@import is deprecated
I use @forwards everywhere 🫣
it is, but it's still so damn useful
you have to forward everything
one by one
This is in my
_tokens.scss and then I just do @use "@tokens" as t;
Import you can do it automatically?you can just do
import 'borders' and BAM!
everything in it is available, if you have an index.scss file
which is absolutely amazing for configurations
but the dot syntax is really nice tooAh that's just
@use "_partial.scss" no? what's the difference
I like namespacing a lot personally which is why I use an aliasmakes sense
the difference is that everything is global
which may not be desirable
Yea I don't like that personally haha
i like it because i don't want to have to repeat
@use everywhereYea totally get that, I'm in the headspace of at least, if another dev comes on and they see variables used, they know exactly where it's coming from type of thing
imagine i want the function
color-from-settings
i have to @use that file EVERYWHERE
it's so irritatingly annoyingAh I see what you're saying
you know that there's extensions that tell you where the variables are declared, right?
I don't mind it honestly, I still think it's a bit more clear when you're manually importing it and namespacing it since you'll know where the variables come from
Nay 😅
What if someone doesn't have that extension? I'd rather be more verbose for the sake of maintainability
But I get what you're saying for sure
it's just 2 different ways of doing it
i prefer my way because i can just import everything i need once, and it is available to all the children
if im importing, it's because i will use it everywhere
and if i want something just locally, i can always just
@use a specific fileLol perhaps you're convincing me...
this is why i think that the
@import being deprecated is just dumb
sass is supposed to be a "[...] the most mature, stable, and powerful professional grade CSS extension language in the world."
removing imports, a css feature, is neither mature, neither stable and not powerful and stops being a css extension and moves to it's own languageWhy did they even remove it in the first place? Wasn't it because there were unintended side effects or something with it?
they want to remove it because of it being harder to reason with and harder for libraries
for example, if you want to use bootstrap, you can just use the specific file you need or import it all and all the junk comes together
that's another downside of the import
however, if im
@importing bootstrap, it means i will use everything anywaysYea sounds more like a user issue rather than them having to remove it entirely
yes, but if you want a library but don't want to use everything, you need to manually pick and choose what you import and be careful with where you import
So instead they're forcing you to manually import everything rather than giving you the option. Don't really like the idea of not having that option
yup
also, it's really useful to just do
@import './folder-name' and everything is imported, without you having to do it all manuallyI do that already with an index partial
yeah, but you have to type each file manually
Ahhh that's not too big of a deal imo
it isn't
also, can you do this?
and it generates this:
this can be really useful sometimes
I don't know honestly looks cool though 👀
it does
you can also mix both:
@use configurations, functions and stuff, but @import fragmented styles
and you have to emulate what the @import can do by messing about with weird @mixinsI think I'm just going to try to stick to the simpler stuff at this point 😂 use one or the other I have bad experiences trying to mix 2 things at once 🤭
im not trying to convince you to change to imports
Ya I know haha
just saying that there's a different alternative that is nice
and that alternative will be removed because of nonsense
Hey epic I have a quick question related to this. Since I ended up just making them all classes, if i @use them in multiple files, it duplicates the css output. So I've moved to only @use it in my main.scss file so it's imported once.
The problem is, now I can't use @extend since I'm not importing it in each file. Do I really need to make a separate partial file with a placeholder selector or mixin that both the main utility class file and separate files can import?
The whole reason in the first place too why I want to use @extend is because I want to avoid classes like "form sign-in", I'd rather just have something like "form--sign-in" and then extend the .form class, but maybe that's a bad motivation
don't worry about the output css being duplicated
unless it is repeating to an extreme, it shouldn't cause any issues
and obviously, check the compressed output size as well
just make things easier for you
if size becomes an issue, then deal with it at that time
What the hell, after going to the gym and coming back and trying to do literally the same thing as before, it no longer duplicates css. I even hard refreshed & rebuilt several times before too...
Sass is so confusing 😂
sass is telling you to go rest
I can't I got OT to get this website preview out by Monday.
I really shouldn't have tried to get this fancy and start semi-refactoring stuff this far in
But I can't help it 😂
The old way was getting too messy, with several layers deep of folders
Ah okay no it still is duplicating nvm oh well
I think I'm just going to do something like
class="form form--inner" for now, where form is the base utility classdude, whatever gets the project done faster
that's the most important