Can Vanilla CSS Replace Sass Yet?

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here Here is Scott Silinski and Wes Bos.

Welcome to Syntax, the podcast with the tastiest web development treats out there. Today, we've got one for you on, Can vanilla CSS replace all of the features of Sass? We talked about we have nesting now in CSS, But does it make sense for people who are on SaaS or like you're starting a new project? Does it make sense to go vanilla CSS Or not. And is there still things in SAS that make sense? So that's kind of what we're we're going to go through today. We're going to go through every single feature of SAS and say, Here's where it is. We're gonna give it a replaceable thumbs up. We're gonna give it a plausible or a no. Missing fast is Still better? It's, like, kind of a Mythbusters type of thing here. Kind of a Mythbusters.

Yeah. How how you doing today, Scott?

I'm doing good, man.

We got some gorgeous weather out here. I, I've I've been spending some time in the yard.

I was picking up leaves and stuff because we got leaves over here. And let me just tell you, it feels so awesome. It feels so great to be doing that. Had a great Easter Sunday. How was your Easter? Oh, it was pretty good, actually.

My sister over for Easter and had a big old ham, which is pretty fun. Kids kids loved it. So, yeah, good good Easter as well. Kids are still home today. It's Easter Monday today, Which, I don't remember getting

I don't even days off. Easter Monday. Yeah. I don't remember. Heard of Easter Monday? No. I've never heard of Easter Monday.

This is some I thought on my calendar, I was like, is that thing? But then again, I I asked Courtney on Saturday, When is Easter? And she gave me a look like, come on, man.

She's like, it's it's tomorrow.

So, yeah, I I'm not the best person for any of that stuff. We we did like, we got to do, like, a neighborhood kids egg hunt, and the kids went nuts for it. The family that was hosting it does such a good job. Like, now that can you imagine having a house party with kids Hunting for Easter eggs had they're they're being maybe, like, 50 kids there and not having a single kid blow up and start freaking out about anything. Like, I couldn't believe it. And all the kids left that party being like, heck, yeah. That was great Easter egg hunt. And I just think it like that. That's good. That's impressive. They they really, like, Did a great job of hosting this thing, and they even had some,

some nice little stuff for the adults too. So it was

Pretty nice little Easter weekend. We did that. We did our our egg stuff. My my daughter's favorite thing in the entire world is bunnies, so you could imagine that, Easter is a big hit for her.

She just went ape s h I t with all the bunny stuff, so, It was it's been a very funny weekend for us.

We, we have a our backyard is, like, bunny central. Like they're always ripping through there. Yeah. And our kids love seeing them hop by and we're like, oh, there's a bunny. Go see it. And then the other day, we also have a lot of falcons in the neighborhood as well, that you see them hanging out on top of the light posts and they swoop down and and grab a mouse or something like that. And the other day we saw half of a bunny On the ground, and we had to explain to the kids how, falcons love eating bunnies.

Oh, yeah.

I found a a bunny carcass in our front yard And edited there for, like, a week, and I was like, oh, no. This is the bunny we had seen in our yard all the time. So I had to, like, to get rid of it before my daughter saw it or something. But, you know, we have We don't have falcons. We have a lot of bald eagles in in Denver. Really? It's like you'll be like, why? You'll see 1 on the and not a lot, but, like, I don't remember ever seeing a bald eagle before, and you'll be in the park, and there'll be a bald eagle on a, a lamp post. Or you'll just see them on Reddit, photos of bald eagles. Oh, yeah.

Apparently, we got a big banner here in Hamilton. That's an Eagle, and it marks the return of the Eagle. Like, apparently, There's been no bald eagles in Hamilton for 40 years or something like that, and, apparently, their numbers are up right now, which is pretty cool to I'm not I'm not a patriotic American, but I do like the cool bird.

They are cool birds, and they're they're rather impressive to see them standing up there, all people and such. Yeah. Alright. Let's get into

Sass.

So we're gonna go through the features and and say whether they are replaceable or not and sort of explain how we might approach it if you are not Using Sass.

This is not an argument against compiling CSS because Certainly, you will still need to use something like post CSS to compile your CSS, remove dead CSS, things like that.

And this is also not like an anti SAS argument as well. There's nothing wrong with SAS.

We saw this with jQuery as well.

People get really up in arms. And, also, like, there's people that work hard on the SaaS project, and they don't wanna, throw any shade their way because there's it's an amazing project. But as web standards move towards things that we like, we saw this with jQuery.

We might not need jQuery because We have looked at that and said, that's a good idea. We should have that in the native language.

So I think that's the same thing for Sass as well. We're starting to see CSS, the language, get a lot of the features.

We might not have to to use it anymore.

Yeah. And before I I'd become labeled as some sort of CSS purest or something like, that YouTuber did. I, I I I do wanna say first and foremost, like, my whole career got started off on, like, SaaS tutorials, Compass tutorials. Like, SaaS I watched them for a long time. Yeah. Been my jam. Like, I I am a big sass head. So, if you ever hear me say anything that is pro, like, Browser based. Yes. That's it here. It's not because, again, I'm not like you said, and we're not anti Sass. I love Sass. But, again, you You might not have to use it anymore for some many of the things you're using it for currently, and and that's a pro in my book the same way, like you said, with jQuery. So, let's dive into,

or do you wanna do this post CSS thing first? Yeah. Well, let's just explain what post CSS is Sure. Because a lot of the answers are going to be no, but Post CSS or yes, it works. And you can use Post CSS for older browsers. So Post CSS is a Bundler transformer for your CSS. So you feed your CSS into post CSS, and then you can get a number of plug ins That will do things to your CSS. Like, the most popular example is Auto Prefixer.

It will add in the vendor prefixes that are required Based on which browsers you're supporting, it's pretty simple.

And I was actually surprised the other day.

I found something that did not work without a vendor prefix still. What was it? Yeah. It was, the scroll bar stuff work without a vendor prefix? The I think it does, or maybe it's custom. I know the input type of range still requires, like, custom things, but that's not a vendor prefix. I made a TikTok about it. One sec. Let's pause this a sec.

Oh, it was the CSS gradient.

You have to use Dash Webkit mask instead of just straight up mask.

And it's hilarious because even Firefox supports The webkit prefixed version as well because so many people are just doing that. They're like, oh, you forgot to put the regular version on.

So every browser, including Safari, Firefox, whatever, supports just regular mask.

But for whatever reason, it's never been unfixed In, in Chrome, there's probably good reason behind it, but it seems a bit silly.

Yeah. Yeah. The you know, vendor prefixing for CSS is certainly something that was of a time, for anyone out there who remembers the the CSS 3, please, and any of that stuff. When for a very long time and and For, you know, many years in the start of my development career, CSS hadn't seen any major improvements, and it was kind of like a done thing. It was like, this is CSS. Right? But then when CSS 3 dropped, we got all these new features, browser prefixes, and all that stuff. And then that really is what Bloated the need for tools like SaaS, because now all of a sudden you have these great new features.

You you have browser support that's kind of all over the place. You put in a tool intermediary to there. And then as the web has evolved, we've gotten more and more CSS properties, but it's also gotten more and more dialed in in terms of, how these things are being added to the browser. So now we're not having to think so much about prefixes.

But the problem there is that then becomes people just aren't thinking about Any of that stuff at all. And then that's why you do end up using a tool like post CSS to say, you know what? Just just, you know, post Compile my my CSS or just compile my CSS. Take care of anything I might have thought about or not, you know, based on whatever browsers I need to support, And just do it sort of like Babbel, right, where, before Babbel came out, you were having to, like, really think about well, Babbel came out pretty early in the scheme of things, but It's basically allowing you to target specific browser versions to make sure that stuff's supported.

But what's cool about post CSS in addition to That aspect of things is that there's just a whole plug in ecosystem, so you can add plug ins for specific CSS features that are yet to come Individually as well as supporting things like prefixes or removing unused code or all sorts of things, even changing the language of certain something. So I I personally do use post CSS even though I don't use a CSS, or Sass sassy CSS or SCSS or any of that stuff. But I do use post CSS today, no matter what, pretty much on every project, just to get a baseline coverage.

So first one we have here is variables. We've talked about this quite a bit.

Variables are extremely well supported in all of the browsers.

So, yes, I think it's better to do a regular CSS variable. The syntax is a little bit funky, we know, but I've Certainly gotten used to to using that syntax. No problem.

And it's better because your variables are live and updated in the client. So should you need to Change a variable at any given time. Anywhere else that variable is used or updated, it will be up It will ripple through your Tibor application. And also you can scope them to specific selectors. I'm going to talk about that when we hit mix ins because A lot of the stuff you use with mix ins can be replaced with scoped variables.

Yeah. And besides just I mean, the scoping is such a huge thing because, You know, we are seeing a more of a shift towards scope CSS in many ways. You know, frameworks are adding scope CSS. We have j s, or CSS and JS frameworks that are really just a strategy for scoping.

Yeah.

So scoping CSS has become a more More, you know, way we have web components right with really truly scoped CSS and CSS variables Allow you an interface to update those things outside of a CSS component or a web component or whatever In a more controlled manner that makes overriding and perhaps augmenting the current properties of more controlled manner. So Yeah. Those variables to me are are such a huge thing, and it is that that live component to them, people might discount that as being a huge thing. But the fact That it is live becomes, really super important in dealing with dark mode, light mode, themes, sizes, anything. And CSS These variables, in addition to that, also have the ability to have a default value for these things. Meaning, you can set them up to look a certain way and then have the override come in, And that override can greatly change the way that something actually functions or works. So CSS variables to me, are very high up on the list of the greatest improvements to CSS that we've seen in a in a long time, and I don't put them in the same category as Sass variables.

SAS variables are only existing at compile time. There's really not a whole lot you could do with SAS variables, Light mode, dark mode, dynamic stuff. It's really just simply

a find and replace. That's a fast variable is a find and replace. And this Works in such a greater way than that. And I posted about we're going to talk about the colors in just a second. And people say, like, why not? Like, I was showing how you could change 1 variable and the rest of the colors would update. And I got a lot of people being like, I'd rather pre compile them so that they don't have to be compiled on the client. As far as somebody said, what a inconsiderate use of your users resources, Meaning that like I'm burning up their CPU, calculating an opacity every single time somebody loads the page.

And I thought, like, 1st, show me the stats that this is is slower.

And second, you're not understanding that I can literally get any color if I wanted to think. Okay, let's pretend I could do 20 colors.

And then I calculated the Eight different colors based off that 1 color. Okay. Well, then I would need to precompile 20 times 8 possible different color combinations ahead of time, Whereas just 1 variable can be used anywhere. So it it really like, what's better? I don't I don't know the answer to this, but what's better, calculating it in the client Or shipping a bunch of extra CSS for every possible situation.

I'm not really sure, but show me that info.

Yeah. The shameful, wasteful usage in, who of, of people's network. You're not even considering people's network usage, Wes. Come on. You can't win.

Next one we have here is CSS nesting. This one just dropped as well, And this is honestly the reason why I would say most people use SAS Because it's so much easier to write a selector and then you can nest another selector inside of that. You can just say, Like, let's say I have a menu, and then inside the menu, I want to select all the links or I want to select a span with a specific class on it. It's so much easier just to Nest your selectors inside of it than to have to write out the long chain of selectors. Certainly can get you in a lot of trouble where you just nest everything, and You should try to keep your selectors as flat as possible, but it's really nice to be able to nest them in. That has now hit CSS, it's in Safari Technology Preview, and it's not a feature, meaning that you can compile it with post CSS Back to unnested CSS so you could start using it today in literally every single browser.

Yeah. And I I really like that this is finally getting here. You know, when nesting first came out, there was the idea in CSS nesting of anytime you have, a nested property, not syntactically nested, but nested in terms of the specificity order. Right? That you would wanna do that in the syntactically nested format. And then people got way too crazy with that. I'm just All my CSS is indented like 10 lines deep because it's just nested within nest within nest. Then we kinda shift back, and and there was the whole, nesting is considered harmful for so many reasons like that. And and really what we've hit is, like, the sweet spot of nesting where You you now know that you can self contain components to scope things, and nesting can help you scope in that regard. But it can also just save you typing. It can save you, some nice at ease not having to repeat yourself with the class names or the property selectors over and over again. So you end up having, like, a nice little interface. And overall, I've got to say, nesting is one of those features that when SASS dropped it, it was huge for me. I I It really changed how I wrote CSS. It made my CSS better in many ways, because you're not having to think about The selector nesting as much anymore.

But now we have this in browser, and, you know, people have been really Criticizing the the syntax for this a bit because the SaaS version of the syntax has always been fantastic.

The way it works is inside of your brackets, you just do your next selector.

You don't have to do anything beyond that, and then you can use an ampersand to represent the parent. So if you want to do a pseudo selector on the parent, you could say ampersand, colon, the pseudo selector, your brackets, and then have that work. Right? But unfortunately, when the new version of this came out or when it was released, you you were you were having to, always, almost always indicate the parent due to how CSS parsing works. But, Wes, has there been updates to the CSS spec?

It's it's very clear. So the version that is approved and released today is very close to Sass, meaning that you can just nest A selector inside of the parent and you don't need that ampersand. The only time in when did that change? I don't maybe a a while ago, there was a couple of goes at it. Like, we also had the at nest as well, which was confusing.

And pretty much everybody just kept coming back and say, no, we want these. We need that.

Yeah. So it's very close now. The only kind of gotcha is, like, you can nest if you know Sass, you probably know it very closely.

You only need the ampersand when you are doing Element selectors. So if I say like I have a wrapper and then inside the wrapper, I want to select dot sidebar.

I can just select that sidebar, and it's it will work just fine. But if I wanted to select an element like a div or a span, you have to use the ampersand div. And there's some Lea Veru has a very good get up thread on why this is. It has something to do with, like, positive look ahead regexes, And they are still looking for the next version of this to take that away because a lot of people are, it's annoying to have to do the ampersand when I do and Do not need it. So it might still work, but also it's not a big deal just to put an ampersand in it. I was very happy with

Where we're at with CSS Nesting, it looks really good, and it's very easy to write. It feels like it was it's almost like a couple of months ago. I mean, I could my timeline could be totally wrong here, but it It was only a couple of months ago when they hadn't yet figured out this SCSS style nesting to the to the degree where it is now. But what's so cool about this is you even have native media query nesting in CSS Yes. Which To me, it was always one of the killer features of nesting. You're inside of a selector already. You wanna apply something only to a specific Breakpoint. You just do your app media directly inside that selector, and then you can write your CSS inside of there. And I gotta say, I'm so happy that that's here because that's always been such a huge thing for me in terms of how I use CSS nesting.

Any nesting API that hit the browser had to have media queries in it. So, the new nesting rules all look super, super good. I'll have a blog post here from Adam Argo on developers.chrome.com, and it really shows you a lot of, like, a Ton of practical examples in terms of here is how you write it now. Here's how you can write it with Nesting. Here's how you write it now. Here's so if you have any doubts about the syntax.

This really shows you just about every single use case you'll hit to. And it does a really great job of showing you the before and afters. A couple things. One kind of cool thing with the you can't do a SaaS is you can nest a container query

anywhere inside of a nested container. So, We've talked about container queries on the show before. You display something as container. And then let's say your 6 levels nested deep, you can just say at container and then apply this. You don't even have to put a name on the container.

It will just know that because you nested it Inside of a container, it knows which one you're referring to, which is fantastic. I'm a big fan of that. Yeah. Yeah. And then There's also a really cool feature that not a lot of people know about in Sassa. It's called breaking out of the selector.

So if you're 3 or 4 levels deep And for whatever reason, you have, like, an edge case and you say, I need to break outside of the selector and just go back to the top and write a plain selector.

You can use the ampersand at the end of a selector, and that will break it out. That also works in native CSS selecting as well. I had a bunch of people being like, Well, CSS doesn't do this.

And I was like, yes, it does.

I just read the spec and it does it does include it. So that's good. And then one more thing is SAS is they released a blog post the other day that says they are looking at adding native CSS nesting To SASS because, like, people wanna use new CSS features in SASS. Unfortunately, it's a breaking change because they're similar.

So what they're proposing is that you can just include regular CSS in, in a Sass file, And it will just omit it'll it won't compile it. It will do nothing. It'll just include it, which is kind of a bummer because then you can't use any of your SaaS Variables or anything inside of it. So you kind of just are you have to step outside of it entirely. So I don't know if that's a great solution, but hopefully, we'll we'll see something different. And then also, I guess you'd have to still post CSS compile that.

Yeah. If you want to support all the browsers,

It's iffy. And you might be wondering, well, why the heck would you even, want to use native nesting if you're already getting the same nesting features from CSS? Well, you'll be shipping less Code, really. I don't know if this really matters when it comes down to it in terms of, compression engines. Yeah. I I really don't know how much You're you're actually getting a saving, but you you'll be shipping less things, overall because when you're compiling a nested script, it's having to In line, essentially, duplicate those selectors however any layers deep there are in it. Yeah. It's not nothing for sure. Especially with, is

Like you could say yeah.

The classic example is you want to select h one through h six inside of your card.

Previously, you'd have to compile out to the H1 H2 H3 like that card space H 1 comma Dot card space h two. You know? Yeah. Oh, totally. That's a lot of code to to ship, and it it just it's compiling it. Now we just use is.

So you can say dot card Colon is h one through h six

and you're up and running. And if you don't have to compile that, I don't know how much of a difference that really is at the end of the day. But That's my stance as well. Yeah. Yeah. I'm not looking at the hard data here, but it does feel like it feels like it should be something. Right? It feels like I mean, You're you should have a savings there. Let's talk about let's move into the next one, which is colors, which, honestly, colors inside of SAS were a huge thing.

Now granted they're not dynamic in the same way that CSS variables are. Right? But the fact that you could compute all of your colors from a given color With such a killer feature for SAS. Now where SAS kind of lost me in this one was when they you know, SAS has recently kind of moved to there's Dart SAS, Lib SAS, Ruby SAS, and, like, they all have kind of slightly different APIs. And the documentation It's so hard to parse for some of these things where you go into, like, alright, I'm gonna which color function should I even use? And at this point, the SAS the whole SAS color function thing to me is is is a little iffy to the point where I I'm I'm just not touching it. I'm not using SAS either right now currently, but, now we you've heard us done several episodes on this stuff. We have the ability to not only work with different color spaces, but we have the ability To use color mix, hopefully, color contrast soon would be a huge thing. Just a tremendous thing. Relative colors. We have these abilities to manipulate our colors coming to the browser so so soon that That is going to be out the window in terms of something that we'll even need to worry about. The only thing that we're losing with these things is semantic function names for them. Right? Yeah.

That's one of the thumbs up for SAS is that you can get a nice named darken lightion. Yeah.

Whereas we would have Use either the relative color or the color mix function.

But the the upside to the built in color functions is that Once they are supported in all the browsers, this is not really something you could I guess you could polyfill it with JavaScript, but it's not something you can compile away, But you could pass it 1 color and then generate the rest. So I think about, like, FreshBooks has invoicing.

You give it 1, you give it your brand color syntax yellow. And then it can come. It can calculate all the darker, lighter, the accent colors based off of that, which is really cool. Super cool.

Go back to listen to those color episodes if you want to learn more about colors in upcoming features. Yes.

Looping.

Oh, we we forgot to say whether whether that was a good, Better, plausible sorry. Replaceable, plausible, or missing.

We'll see that for any of these, have we?

Yeah. Well, variables was replaceable.

Nesting is replaceable.

Colors plausible because because of the Has to be compiled. You could get a post CSS plug in to just compile it at build time. So you could say, well, I get the same as I do assess, But it's just not live because it's I want to support older browsers, right? Or you could pop supports queries in there. So if it does support it, then Then you could use it. Otherwise, compile another version. With a lot of this stuff, I sort of see myself saying, well, I'm gonna write to the spec Instead of Sass because eventually, this will all be in the browser, and this is a standard. Right? I don't like if if I am gonna use something that's not standard, I'm going to go with Sass. I'm not going to go with some random post CSS plug in that somebody made that adds a feature to CSS because That's not CSS, right? I'm going to go with Sass in that case. But in most cases, I'll say I'm just going to use the spec version of this and I'll just have to have it static until All the browsers can support it. So what I'm gonna use, Wes, is actually post CSS. What I'm going to be using is the post CSS with the preset envy

to utilize those features because it it's not just a random plug in that somebody made for a feature. It is mostly trying to be spec Compliant. Right? They're trying to follow the specs specifically in terms of the syntax that's accepted for these these plug ins. And so much so that the website will will even tell you what stage the current, CSS, initiatives are in. Yeah. But I I do wanna go back to like you said, that nesting is replaceable, and I think that the answer needs to be that nesting will be Replaceable because it isn't fully supported yet. And so it does kind of go into iffy, doesn't it? No. Because

The nesting can 100% be compiled to regular selectors, and there's no features I see what you're saying. I see what you're saying. For maybe the container queries one that I just said, but there's no other features that you're missing that cannot be compiled to. It's like arrow functions in JavaScript.

There's not you can use an arrow function. And if you need to support IE6, there's no there's nothing missing. But if you take a like, that can be compiled. But if you're looking at features like, like a symbol or something, it's like, oh, well, you can't Poly fillet. You can't compile it. You can't transpile it. Then then you sort of have to sit on your hands and wait for for that thing to be fully supportive. But nesting, you can start using it today and just compile it to

the expanded selector. And I don't I don't lose anything. Yeah, I I was when I was thinking this, if it's fully replaceable, would be fully replaceable without post CSS.

Oh, no. So that that's why I was interjecting there. Yeah. I think you're always gonna be using,

post CSS. And like you said, you should be using the preset env, which essentially what You do is you give it the browsers you're supporting, and then it chooses whether it should compile, transpile, polyfill those features for you Or if it should just ship it straight to the browser because, well, you're only supporting these browsers and all of these browsers support it. So there's no need to do so.

Totally. Well, let's get into one that's very not in CSS right now in terms of in the same use case Yeah. Or in the same syntactical realm, which would be Looping.

In SaaS, you could write essentially a loop to do something. Right? You have, numbers. You want to increment those numbers and use those numbers in a way to perhaps Have those numbers be a part of your properties to do some math or to do some color work or do all kinds of things. I I I remember using looping Specifically for things that various properties and CSS can do now. Before we had nth child, looping was awesome because you could say, Alright. The 1st item, 2nd item, 3rd item for it. You know, I want the every every third item to get this thing. Well, we can do all that with nth child now or even as far as, like, layouts went. We had to do a whole lot with classes in the past to do grid systems where you were floating things, and everything had to have a very specific percentage width. So it made a lot of sense to loop over and do some math there, but we have Grid and Flexbox.

Those things take care of just about all of those aspects of it. So for me, I'm sitting here left wondering, like, what would I even use looping for in modern CSS Today, and I don't know if I have a good answer.

Yeah. I think in most cases, you don't need it. We've got auto fit, autofill, all of these Advanced selectors, and you can also throw a variable in. So my example, we'll hit this when we do mix ins as well, is if you do Have something that needs to be different for every single instance.

Let's say you have 5 items and every single item needs to have a different color because Because you are are, like, saying, like, okay. Well, CSS is gonna be blue, and HTML is gonna be red, and JavaScript will be yellow, and TypeScript will be blue as well.

If that's the case, then what you do is you write your selector and you make the one thing that needs to change a variable, And then you have another selector or literally in line with the style attribute you pass in, you overwrite the variable and that will be applied to Every single one.

I did hit it. I did hit an edge case the other day, though, where I was like, I wish I had had looping here. And Really? I was I was creating a HSL color picker with all of these new things that we're talking about, and I needed to Loop the rainbow. I wanted to show a gradient of every single color in the rainbow. So I said, no problem. Linear gradient from HSL where the hue is 0 to HSL where the hue is 360.

Right? That's how you define hues in HSL, you go from 0 to 360, and I I loaded it up ready for my beautiful rainbow. And can you guess what color it was?

I

What color was it? It was it was red. It was red to red. And the reason behind that is because 0 degrees. HSL is is red. Then you go through the entire rainbow, and you end up at 360, which is also red.

And I was Doing a gradient from red to red. And I was then, yeah. But I want you to to hit all the stops on the way along and show me the rainbow.

And to do that, I needed to put in a stop. I did a stop every 45 movies, and I thought it was a pretty big selector, and I thought there's no way to do this via CSS without a loop, without without a loop. Yeah, Yeah. So I added, like, 8 different stops in there, and every single one was a specific degree. So there's one situation I'm assuming with, like, animations You could you could get into that as

well. Yeah. Anytime, basically, you need to, automate something that Could be done mathematically, I guess, that there there becomes a place where that that exists. But it's so funny because I I just Those those those

end cases are so edgy. Those are so edgy. You know? They are edgy, and you know what is very good at looping over data?

What? That's a JavaScript. Transition.

Oh, no.

Today's episode brought to you by JavaScript.

Yeah. That's

alright.

People turn their nose at inline styles, but inline styles is Fantastic for when you want to pass a variable into a specific selector and override it. So what I could have done there Mhmm. Is I could have said background var dash dash background.

And then when I was generating my HTML, if I was doing it with React or Svelte or anything. I could have looped over in JavaScript and just passed in that one little piece into the style. It's not in the same place, so I get that.

So I'm going to give this one to Sass with a caveat of saying you probably don't

Need looping in most cases. Wanna hit those. Yeah. I hear you on that one. I I love using JavaScript and CSS in those ways, like you said, In line or whatever was felt has a, a property where you can define CSS variables as essentially props, Which just you just do hyphen as like a prop. And like to me, you know, with JavaScript is is total just just lovely territory for me and things I like to do with JavaScript and CSS.

Let's get into mixin or extends. Basically, mixins Or extends are the way to, write 1 piece of CSS functionality that can then be applied to various other classes. And you might be saying, well, that sounds like a class. You're just encapsulating things into a class. But the caveat is is they function more like functions.

You can pass things into them. Right? They can be dropped in to be little utilities here and there, and you could do so without Having to make a class. Now granted, it it can compile, and that adds to reusable CSS questions of, like, are you adding Too much CSS here to do the same thing. Is it wet CSS and not dry? But they they offer A nice little bit of ability to encapsulate functionality like a function to just drop into your code with context.

And I I think that I would like to see Nixon's in some regard in CSS.

I could be convinced that you don't need them. It's not something I'm Holding out for, but it's something that I could see being useful in CSS.

Yeah. I was never a fan of mix ins because I found it Too hard to figure out where it was written. Like, when it was compiled, I was just like, oh, my gosh, where did this come from? And maybe I was just a bad SaaS writer. But I have never been a big fan of them. But you can. Like I said, with the passing variables.

What you do is the things that need to be variable. Like the big example is you have a mix in For adding border radius to something and padding based on that border radius or something like that.

You can pass that variable in as a CSS variable and do all the calculations based off that. So I went through all of the SASS documentation and looked at all of the Mix examples. I went to chat GPT, and I said, give me 10 examples of when you would use a mix in, and I couldn't find a single one that could not be Replace with just add a 2nd class to your element or pass the one part that is different In via a a variable. Yeah.

I'm I'm what I would love to do, Wes, and maybe I I can do this while we're talking. Yeah. I would love to go through my level of tutorials repo and check out the version of the level of tutorials repo from 16 or whatever and see what mix since I was using them.

I don't remember What makes sense? I was using, but I remember I really liked it. So it's it's funny how these things evolve. And and, you know, like we've talked about, CSS variables kind of have changed a lot here. But be because we have the way that you can have the scoping for the variables tied to a given class, That does really reduce the need for, mix ins in general. There was a proposal,

in the CSS working group for this thing called apply apply.

And the way it worked is actually kind of cool. So you can actually set a variable to be multiple properties. So you would just when you define a CSS variable, you say Cool corners and then the colon and you open up curly brackets. And inside of that, you put 8, 15 different CSS properties.

Now you've got 15 different properties in a variable.

Then the proposal was to introduce an apply That would then take all of those and apply it to the selector. But they scrapped it because scoping and CSS variables and all that type of stuff, which I read the whole blog post, and it made a lot of sense as to why it doesn't work.

So I don't think we will ever see this type of thing make it into native CSS, and I would encourage you to say, how else can I approach this problem? Yeah. What do we have there? Is that a replaceable, plausible or missing?

I would go as far as saying it's missing, but Like I said, it's replaceable.

I mean,

I go back and forth because I do think there Probably our edge cases where you cannot replicate the functionality of Nixon's.

That said, are those necessarily things that you need to be doing in that sort of way. Or are there other totally valid solutions for those same functionality bets? I would say there's definitely valid solutions for those functionality bets. I'm trying to like I said, I'm I'm gonna go back and look to see if there's anything in particular that I wish I still had as far as mixins go. Yeah. Send us at Syndax FM,

tweet us your your actual mixing codes and say, okay, hotshot.

Yeah. Let's see how you do this. Show you how you do this. Right? Like, I have a Because it's true. Sometimes people say, well, just don't use that. And I hate that because it's like, you have no idea about my use cases for my application. So I would like to see it and see if I can find a decent solution that isn't awful where you're setting variables and looping JavaScript and whatnot.

Yes. Yes, please.

Partials is the next one. You want to include CSS in separate files. It's really nice to be able to organize your CSS into lots of different files and import them.

At import in CSS is Generally frowned upon because it does what's called waterfalling of your request. So if you have style. Css, The browser downloads that and then it parses it. And if there's an at import in there to, like, typography, then you're okay. Well, better go stop and go get that one. Then it parses your typography and then it says, oh, there's a Google font in here.

Let's import that one. Okay. Got it. And then there's a web font here. Let me download that. And that's a waterfall. Right? Like every request, ES modules does this as well. And I had thought that, oh, HTTP 2 gets it gets rid of this, but it doesn't because it's a browser problem. And the only solution Against that right now or there's 2 couple solutions. 1st, just bundle all your CSS into a single file, or into Little bits that load on the pages that are needed.

And the second one is a preload. Now if you notice if you ever go and get a Google font, You'll notice that Google Font gives you a link rel equals preload.

And what that does is as soon as the HTML of your page is parsed, It tells it. It says, hey, browser.

You might not know just yet, but I'm gonna ask you to go get a font for me. And I don't want you to be mad that you told me way too late. So go get it right now. And then when the time comes that you need that font, You say, hey. I already have it. So that's what a preload

tag in Google Fonts does. Yeah. This is seems like prime territory for A glow up in CSS. It feels like the syntax is there. The the syntax is largely what everybody uses in Sass anyways. It's just The functionality.

Right? Like, how the browser is actually handling import. Do you think if they change that from waterfall, if things would break? I like, I don't know enough. Am I?

I think the issue we have this with JavaScript modules as well is that The browser doesn't know what it needs until it downloads and parses the file. So I don't know how the browser could ever solve that. There was a proposal Where the server would parse your CSS in your JavaScript, and your server would walk the entire import tree.

Mhmm. And then in the initial request, it would say, alright, here's the file, but here's also the 11 other files you'll need. And at that point, it's not a big deal because HTTP 2 will allow you to send all that data in a single request, but that requires buy in from the server and

We don't have that yet. So bundling is your yeah. And and requiring any sort of CSS to have buy in from the server feels like,

not right. Seems a bit odd, doesn't it? You know? Seems a bit odd. Yeah. Maybe we'll have somebody on that does servers because I asked on Twitter, like, is there a a fix for this? Everyone says there was a couple things that was, like, proposed, but they got scrapped. There was also, like, a hinting header or there is a hinting header where you can, On your initial request, you can hint to the browser. Hey. Hey. But hey. I might hate. Downloading some CSS later.

You might be, Yeah. You might be thinking, what are we what do we download later? Might be some CSS.

Yeah. I I'm I'm I don't know.

I like Like, the way that importing works in Sass to me is, like, ideal. So, yeah, that is a missed feature. I do use post CSS to do the same thing using The post CSS import. So to me, it's fine in my current setup, but I I do wish There wasn't a interesting or valid solution to just being able to use the browser import and having it not, I don't know. Not impact you negatively.

Yeah. I remember the the first time I encountered import heavily was within the Magento codebase. Anytime you're getting into, like, Magento themes, it was like heavy usage of import. And I remember thinking, wait. You can you can do this? I didn't know you could do that. And then and then that's when I was also introduced to the arguments around whether you should be doing that or not.

Yeah. It's it's Awesome. Because that's how we do our JavaScript modules. It's great to be able to put everything in its own file as you need it.

Yeah. Totes. So the answer to that one is,

missing, but Missing. Yeah. Post CSS.

And this is the first one where we're going against the spec, but we're saying, yes, that feature is awesome in Sass. But if you aren't using Sass, you can just use PostCSS import plug in, and it will compile it all into a single file.

Totes. Alright. Next one is math. And math, Let me say math and CSS is fantastic. I bet if you went through the listing of all of the features we're talking about in this episode to to me in 2011, I think my head would have actually exploded knowing that you could do calc min max clamp a, a b s inside of the browser.

What?

Wait. Can you use ABS inside the browser? I've never you have this on the list. Yeah. I've never used ABS inside the browser.

Oh my god. I was going through, and I made a little TikTok on how clamp works and whatnot. And I was like, what, like, what are the other functions? We have obviously, we have calc, Min, max, and clamp. And I was like, is there other ones? And there's abs, which all it does.

Yeah. It just removes the negative from a number.

Yes. Absolute value is super useful.

I I did not know that was in in the browser, and I Let's see what the support is

Before we tell everybody to use it. Yeah. Everybody

drop what you're doing and use absolute browser.

Speaking

of apps, yes. It's been supported in IE since IE 10, Safari since 11, Chrome since 52. So it's been

been hitting the gym in every browser. It's been hitting the gym for

a long time. Hold on. No, this is wrong. That's CSS property absolute position.

There we go.

CSS position. Absolute brand new. I'm wrong. Alright.

The only only Safari 15.4 supports CSS apps, which is There's got to be a post CSS plug in. I've never written absolute in my code base before. I just use, like a calc value that you can oh, no. You can't use a calc. No. No. You can't. I can do that. You can't do that. Absolute value is important here. Yeah.

It is important to there yeah. I don't know.

Did you and there's also, like, sine and cosine now. You can do Trig in CSS. Did you know that?

Yes. Oh, no. Oh, not not in CSS. Well, hold on.

Let me just tell you how you would fix this. You use CSS Max, so you pass it your actual value and then you think, oh, maybe it's negative. So you also pass it the same value times negative one, and then it will always give you the higher version. Right. It'll always give you the positive version.

Right. Does that make sense? It makes sense. Yeah. You got minus 10, negative 10. Yeah. You pass it negative 10, and then you pass it negative 10 Times negative one, which will give you 10. What if you don't know what the current value is? But if if it's positive, let's say it's 10, then you pass it 10 and Ten times negative one. That's negative one. In both cases, Max will always return positive 10. Yeah.

Yeah. You just have to use variables for the Upper and lower bounds of that.

You'd have to use oh, yeah. You wouldn't say what if you're working in variables. Yeah. Yes. You would. Sorry. My my brain has had, like, a very specific example, and and I realized that was just, like, sitting in my brain. But like I said, you could also use sine, cosine, and tan.

Now if you wanna do some some trick, I've seen some, like, really interesting examples using these animations and and being able to animate things. I'm not using them yet. But hey.

Cosign and sign is has more support than absolute value does. So Wow. I didn't know this was in there.

Yeah. So you could Yeah. You could do some, like, really neat, rotation values based on that. I did that once. I had to figure out. Did I tell the story about the the eyeballs?

I don't I don't recall an eyeball story, but I'm in I'm in. I was doing, like, some face detection,

And the browser based face detection will tell you where the face is, but it will also tell you where the 2 eyes are. And I I wanted to rotate the the box around the face based on you rotating your head, so I had to use Sign coast or tan. One of them to figure out if you have 2 points and they are at different X and Y's.

What angle are they from each other?

Math, man. When your kids when once your kid gets into high school, you're gonna have to Really get your your trick back on. We want to help them with your homework. I know I'm going to have to do that, too. I I haven't thought about that in so long. I was actually good at trig. Oh, yeah.

Yeah. I was not I was really good at accounting.

I was Okay. I could time value money all day long. For me, not so much. I did a math program in high school, Wes, That was you know how, like, in high school, you get a math book, and it's a big book, and you normally get through, like, 8 of the 12 chapters? Yeah. I I did a math class in high school that was Three books front to cover in 2 years.

Wow.

And it was really super intense. You had an exam every other week, and it was, like, really Crazy, but I remember I I did good in a class, and I remember being like, I don't actually be decent in math even though I I don't use a ton of math in my day to day life today, but it's always been a little bit of a fun skill of mine. What about functions here? Functions, functions were great inside of SAS.

Basically, they function like a function. You can pass in things, you can do stuff, and it returns a value.

These things could be really great for A lot of the use cases that we talked about mix ins for, right, where you could pass in value and have some stuff spit out for it. I personally I used functions in CSS quite a bit. I like to write my own functions in in Sass. But, Nowadays, if you think about doing JavaScript based functions inside of CSS, your brain goes to Houdini type of territory. Houdini was, an initiative to bring some of these JavaScript APIs to CSS so that we could essentially write our own properties in CSS, and that's really what this comes down to.

Unfortunately, Houdini has kind of just like I don't know. It's not really a thing.

It is a thing, but it's not a thing. Yeah. No. It's it's a thing, but it's not a thing. If you look at some of the GitHub issues surrounding any of that stuff, It doesn't feel like it's going anywhere, especially when the momentum behind Houdini was really strong Around the time that we started this podcast.

Right? Or was it a couple couple years after or a year after or so? There was, like, that whole, can I use Houdini website that showed, property by property, what you could use and what you couldn't? And I can't imagine that that exact thing has changed Too much. Let me even pull that up. Is Houdini ready yet? Okay. I I I wish I had a screenshot of this from when we first started the podcast.

There are some things the paint's API shipped in most browsers except for Safari. It's under consideration Firefox.

What you're gonna see in this document is what I'm seeing a whole lot of in general in CSS is Firefox under consideration or no signal for Firefox.

And I don't know if that's just because this is a web kit or a a blink and initiation or, a a blink kind of thing here. Mhmm.

But Safari at least has in development for some of them, and it has shipped one of these. So I don't I don't know what's going on with Houdini.

I don't think it has moved much, especially like this. This website has Opera as a listed, You know, as a listed browser. So I I unfortunately, it's not moving a lot forward, especially on the Firefox Unfortunately, the state of a lot of Firefox stuff is that they don't have as many staff as they used to, There's just not as many people to work on this type of thing.

So I think a lot of those features are going to just sort of be lagging behind. I think we'll probably see this a lot in the next year or so, given how fast CSS has moved, coupled with all of the layoffs at these things, Like, shout out to the people that are still left behind working on these things because, seriously, they're probably just motoring, and there's unlimited features to implement. And then there's Asshats on Twitter are just like, oh, Firefox is no good.

I know. So it's, It is funny. It is funny because I tweeted out about Firefox not having the support for something, and it is funny the types of well, no. But my The the premise of my tweet and the tone of my tweet was not these these effing dweebs that Firefox can't get their s together. Yeah.

The point was, Is that like, hey, is anybody else seeing this exact trend where Firefox isn't getting some of the features that Safari because For a long time, Safari was the browser that wasn't getting the features, and it does seem like a bit of a trend. And that was my only point. And then so there would be a lot of comments. I'd be like, don't you know how hard the Firefox yeah. That's not the point. The they're working really hard, and I feel, Really tremendously bad that anybody would have, that much work to do put on them because of layoffs and anything like that. So Yeah. The point with Any of this stuff is not to criticize anybody, especially individual developers. Holy cow. But on the flip side,

I think All of the, Safari is the new IE tweets made its way to Tim Apple because Yeah. Safari has been Ranking lately on all these features. Yeah. And a lot of them, like, CSS relative color, the color contrast stuff, a lot of the nesting stuff, If you want it, I find more and more when I wanna test them out. I'm loading up Safari technology preview because they're the 1st folks To to actually implement them, which is shout out to them. I just wish that Mozilla because, like, Firefox, I'm pretty sure how they make almost all of their money.

Right? Google search. Yeah, Through Google search. And that's people using Firefox.

Google is the default browser. They search for something and they click on an ad.

And Yeah. They obviously have a lot many, many, many projects that try to make money, but, that's the main thing. And if people are Stop being using Firefox because it doesn't support features.

I wish

the big wigs at Mozilla would put up a few more resources on it. We have them. I've I've I've heard that. I don't wanna say anything out of, you know, talking tales here, but I've heard the the higher Leadership there is pretty rough for the development teams working on Firefox. So, you know, who knows what's gonna happen there? But it's one of those things. Either way, back to functions.

I would say it's not not here in CSS.

We don't necessarily know the status of this.

There are The part of sorry, the part of Houdini that what is supposed to give us this is called the typed object model,

which actually has good support. Yeah.

What? Except for Firefox.

It is actually shipped in Chrome Safari.

It has a working draft in the W 3 C spec and is under consideration. So it's not even in development for Firefox.

So we'll see. I think we'll that's a clear one for SaaS saying no. We do not have any sort of named functions or Even if Houdini was the solution, it kind of sucks that you have to write a Houdini JavaScript worklet to get custom functionality. Right? Like, wouldn't it be nice to Be able to just have a named function called Darken inside of CSS where you say, take in an argument and do this thing with the relative color spec. Yeah, I'm in for that. That'd be fun. Next one, we'll we'll go real quick here, the BEM syntax. So one kind of cool thing about Sass, If you use the BEM syntax, which is block element modifier, so you might have something like card, And then you might have an element inside of that card, underscore underscore title, and then you might have a modifier based on that card title that is, like, large. So it would be cardtitledashlarge.

And writing that in Sass was really nice Because you can concatenate selectors onto each other, generating those. So you could do dot card ampersand underscore underscore Title ampersand large. That syntax is nowhere in the CSS spec.

So that is something that only exists in SaaS world. So SaaS is very clearly the winner there.

But I think

With CSS nesting, you can get a get away with a lot of that. We're in such a wonderful world of so many things have been added to CSS now that we're not like.

We haven't hit all of the edge cases.

We haven't come up with all the strategies or techniques. I see something new every single day on Twitter that, using the current CSS techniques, and I say, Didn't know you could do that. Awesome. So I think we're still in the world. We're here. We're we're learning what we can do with all of our Wonderful new CSS power. So, shout out to anybody on the the the lines doing a really experimental CSS stuff. Cool. Well, that's it. What what do we what do we think? Do you can you drop SaaS in 2023? Should you drop SaaS?

Is Sass awful? I think if you are Sass is not awful. Yes. However, I would not pick it up for a new project given What the future looks like and given that you can replicate most of these features yourself, if you are willing to say, How can I approach this a little bit differently and not just say I want to do exactly like I had it with SaaS in CSS? You have to be a little bit flexible, Sort of lean into the CSS way of doing things and being okay with relearning some types of things.

But if I were to start a new project today, I certainly would go with the vanilla CSS route.

Yeah. Me too. I've been doing it for a while.

I have been totally happy with everything in that regard. So, yeah, if you're out there wondering, you know, can I do my SaaS stuff here? I think we just laid it out pretty clearly. There's a a Ton of things that you can do without having to dive into SaaS and having that extra step in your your process or having to deal with it, the various versions of Sass and who knows what at this point. So, that's it for this episode. Wes, do you have a sick pick for us? I have a such a sick pick.

Amazing that they won't just let anybody buy this, but we bought it. It's a cotton candy machine.

It's amazing.

It's unreal. So, I got a lot of I posted this on Twitter. Just kind of open ended. I was like, don't let anybody buy a cotton candy machine. And a lot of people You're a bad parent. Teeth are gonna rot, but hear me out. So, we have our kids' birthday parties at our house, And a cotton candy machine is, like, $200 American, like, 2.50 Canadian.

And you can Buy 1 and make your it's like a really like, it's almost commercial quality. It's super fast, And you can make amazing quick cotton candy for the birthday party. It's super fun, and I couldn't believe that you could just go ahead and buy the type of thing. You just By the sugar, you can actually grind up any candy. Like, I'm a big Werther's fan.

And in the past, I've ground up Werther's and you put it in the cotton candy machine and it just spins a Wortherd flavored cotton candy.

And the reason we bought it is we said, okay, We're looking at we have 3 kids. We've got 17 years worth of birthdays ahead of us. And our kids school Had a cotton candy machine at their fair last year, and they brought in, like, a really cheap one that was like $50. And it was so slow. And there was a line down the road of, like, probably we waited in line for 45 minutes, and I was like Oh my god. We are going to buy a cotton candy machine, And we'll be the cotton candy family at the school. Oh my god. And we'll make tons of money for the school, and it'll be amazing, and it will be pay it'll pay off.

So that's why we did it, and I highly recommend you go and buy a cotton candy machine for your family.

Amazing.

That is amazing. When I saw you bought that, I was like, did he did he actually buy there? Is he renting it and just making a funny joke here? I I didn't know. So You can also rent it. Like, I also thought,

like, I want my kids to have a bit of that entrepreneurial taste. And there's people on Facebook Marketplace that rent it For $60 per birthday party.

And I wanted to be like, well, like, when the kids are old enough, take our cotton candy machine, go rent it to some sucker

for $60 a day and, like, make a bunch of cash. You know? Yeah. And, also, like, I we had not neighbors, but when we lived in Michigan, there was a family near us that clearly had a business doing that with, like, tables and who knows what. So Yeah. Yeah. You you can definitely do that.

Interesting. I'm going to sick pick some little Hanging solar lanterns that are cute for the backyard. Oh. Courtney Courtney ordered these things. And, you know what? LEDs just connect straight up To a little battery and a little solar panel nowadays, and it's really pretty amazing. And so these little solar lanterns are meant to just hang from Your tree in your backyard. And now granted, we don't know the full impact the leaves on the trees are going to have on these things. I would imagine it will be A non insignificant impact.

But right now, our backyard is so enchanting.

We have these hanging from all the tree branches, and They are so cute. It is awesome.

There's a little fairy lights inside of a little glass jar. That glass jar is a solar panel connected to a battery backup.

Oh, that's nice. So it charges the battery. It looks gorgeous. And at night, it feels like you're in just a Charming little village or something in our backyard with all these little Like a glass container

with the oh, this is a lot nicer than a lot of the, like, Oh, yeah.

They are junky, but they're also not expensive or or whatever. Yeah. The LED part of it is the, it's Like, the LED and solar panel part of it has gotten so cheap that the casing of it is now actually nice, where, like, you don't have to get, like, a Cheap, crappy casing for it. So, they're they're really cute. Courtney got some little hooks to hang on the trees with them, and we have them all over. And, yeah, can't recommend it enough. I love The vibes the vibes are immaculate in the backyard.

I think I've, I've said this tip before, but, Yeah. Go buy yourself a can of dielectric grease, and spray them into where the I don't know if you can get at it or not, but, like, do you know where the battery is? Like, there's a little rechargeable battery in there. Yep. We have the matter cottage, And we put them under the steps. And they're awesome because you walk back from the fire and you have these lights. They sit under snow for half the year, and they work great.

And step that they corroded a little bit from the from being wet. So I took them out. I scrubbed them down, and I just greased them up with dielectric grease, which is Grease that you use on electrical connections and that stop that keeps the water out of them and it stops them from corroding. And they've been rock solid for, like, 3 years now.

Hot tip. Yeah.

Alright.

That's it. Shameless plugs. Westboss.comforward/courses.

Check it on out. Use coupon code syntax for $10 off. Yeah. I'm going to shamelessly plug,

for the first time ever, [email protected].

This feels incredible. I'm gonna be, plugging this one now. [email protected] is the perfect place to track all of your errors and exceptions and so much more.

It's really incredible how this tool just continues to evolve.

You know, they've been sponsoring Syntax for a long time, so I have no shortage of things to to talk about, with Sentry, but the amazing things that Sentry can do is just really give you visibility and insight into how your application is running at any given point. And For me, that's, like, such a huge thing to know if if there is an issue, how many people this thing is impacting? How, Like, what is the response I need to have to this? If I'm if I'm getting alerts that a 100 people are having an issue, I need to drop what I'm doing and get on this thing right now.

But not only that, you can preemptively, take care of problems with, their profiling or their Filing or their performance metric tracking, which is incredible.

And these tools just keep getting better all the time. It's it's Amazing how many times you log in to your Century dashboard and see a new or a beta flag next to something because they're just just constantly dropping new features and improving the ones that they're So check it out at century.io.

And, yeah, just, I don't even think you need to use a coupon code this time. Just century dot I o. Check it out. Wicked. Alright. Thanks, everybody. Catch you later. Peace. Peace.

Head on over to syntax.fm for a Full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.