Can Vanilla CSS Replace Sass Yet?

ahead of time,

So scoping CSS has become a more More, you know, way we have web components right with really truly scoped CSS

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.

Light mode, dark mode, dynamic stuff. It's really just simply

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.

And this is honestly the reason why 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 then what you do is you write your selector and you make the one thing that needs to change a variable, use of your users resources, via

So, yes, I think

I would say most people use SAS

and then you can nest another selector inside of that. You can just say,

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 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, 20 times 8 possible different color combinations

Yeah.

Yeah. The shameful, wasteful usage in,

so that they don't have to be compiled on the client. As far as somebody said, what

I don't I don't know the answer to this, but what's better, calculating it in the client a inconsiderate I have never been a big fan of them. But you can. Like I said, with the

CSS component or a web component or whatever In a more controlled manner that makes overriding

Meaning that like I'm burning up their CPU,

Yeah. And I I really like that this is finally getting here. You know, when nesting first came out,

class on it. It's so much easier just to Then the proposal was to introduce an apply The nesting can 100% 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

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 things like that.

are only existing at compile time. There's really not a whole lot you could do with SAS variables,

win.

it's not a feature,

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,

calculating an opacity every single time somebody loads the page.

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 plausible

Allow you an interface to to make sure that stuff's supported.

And I thought, like,

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, for

with scoped variables.

and

SAS variables

I could be convinced that you don't need them. It's not something I'm Holding out for,

replaceable, Check it on out. Use coupon code syntax for $10 off. Yeah. I'm going to shamelessly plug, If that's the case, 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 named darken lightion. Yeah.

and you can also Here's where it is. We're gonna give it a

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 based on that. I did that once. I had to figure out. Did I tell the story about the the eyeballs?

I needed to Loop the rainbow. I wanted to show a gradient

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 The browser doesn't know what it needs

automate something that

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.

throw a variable in. So So you can say dot card Colon Because it's so much easier to write a selector in literally every single browser.

that can then be applied But now we have this in browser, and,

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 the reason behind that is because It tells it. It says, hey, browser.

border radius 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.

Yeah. What do we have there? Is that a falcons love eating bunnies.

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 guess, that there there becomes a place where that that exists. But it's so funny because I I just

Oh, no.

doesn't work.

var dash dash background.

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? to be multiple properties. So you would just when you define a CSS variable, you say and then inside the menu, I want to select all the links or I want to select a span with a specific for your family.

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 CSS variables I have been totally happy with everything

it was a pretty big selector, and I thought there's no way or

I

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 year or so, given how fast CSS has moved, coupled with all of the layoffs at these things, some nice little stuff for the adults too. So it was I certainly would go with the vanilla CSS route.

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,

Yeah. I think

ability to encapsulate

to HSL where the hue is 360.

And the way it worked is actually kind of cool. So you can actually set a

to do this plausible or missing? Nesting is replaceable.

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

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,

Cool corners Certainly, you will still need to use something like post CSS into the style. It's not in the same place, so I get that.

CSS

Yeah. I was never a fan of mix ins because I found it What angle are they from each other? People turn their nose at inline styles,

16 or whatever and see what mix since I was using them.

a property where you can define CSS variables I don't know. It's not really a thing.

I don't remember

A nice little bit of Safari.

and I thought 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 I'm pretty sure

with a caveat of saying

Mhmm. Is I could have said background It makes sense. Yeah. You got

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.

Having to make a class. Now granted,

and just passed in that one little piece 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 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

But they they offer Math, man. When your kids when once your kid gets into high school, you're gonna have to Really get your

What you do is the things that need to be variable. Like the big example is you have a mix in go rent it to some sucker And I was actually surprised the other day.

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.

of every single color in the rainbow. So I said, no problem. Linear gradient from HSL where the hue is 0

questions of, like, are you adding Too much CSS here to do the same thing. Is it wet CSS and not dry?

For adding I 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.

a a variable. Yeah.

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

That would then take all of those and apply it to the selector. But they scrapped it because 5 items and every single item needs to have a different color

but Like I said, it's replaceable.

maybe I was just a bad SaaS writer. But we have a our backyard is, like, bunny central. Like they're always ripping through there. Yeah. And is,

CSS

Let's say you have in, meaning that you can compile it with post CSS 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 supports CSS apps, or into 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

0 degrees. HSL is is red. Then you go through the entire rainbow, and you end up at 360, which is also red.

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

In via but hopefully, we'll we'll see something different. And then also, I guess you'd have to still

Those those those

in most cases, you don't need it. We've got auto fit, autofill, all of these Advanced selectors,

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 there Probably our edge cases where you cannot replicate the functionality of Nixon's.

I would go as far as saying it's missing,

to something and padding based on that border radius or something like that.

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

wish I still had as far as mixins go. Yeah. Send us at Syndax FM, Did you and there's also, like, sine and cosine now. You can do Trig

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.

Let's get into mixin or extends. Basically, mixins

functionality

pass the one part that is different like, you can nest if you know Sass, you probably know it very closely.

but it's something that I could see being useful in CSS.

on why this is. It has something to do with, like, positive look ahead regexes,

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 I was like, yes, it does.

on

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,

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.

It will just know that because you nested it Inside of a container, it knows which one you're referring to, which is I think the issue we

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

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.

So if you're 3 or 4 levels deep how they make almost all of their money.

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.

So what they're proposing is that you can just include 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 approved and released today 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.

get up thread

And they are still looking for the next version of this

It's it's very clear. So the version that is And then I calculated the Eight different colors based off that 1 color. Okay. Well, then I would need to precompile

Code, really. I don't know if this really matters when it comes down to it in terms of, 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,

nested property, and perhaps Yeah. Yeah. The you know, vendor prefixing for CSS is certainly something that was of a time,

a

Element selectors. So if I say like I have a wrapper sorry. Replaceable, plausible, or missing.

you can just say at container The browser Sign coast or tan. One of them to figure out if you have 2 points but that requires buy in from the server large. That syntax is nowhere

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.

media query nesting in CSS 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.

regular CSS and then it

is h one through h six I think it does, or maybe it's custom. I know the input type of range still requires, like, custom I don't think it has moved much, especially like this. This website has Opera as a listed, because

dot sidebar.

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 And, yeah, just,

new CSS features in SASS. Unfortunately, it's a breaking change because they're similar.

you you were you were having to, 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,

you know, people have been really

has always been fantastic.

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.

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

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

in a Sass file, And it will just omit it'll

are you have to step outside of it entirely. So I don't know if that's a great solution,

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

your brackets, and then have that work. Right? But unfortunately, Houdini type of territory. Houdini was, your brain goes to for the first time ever, [email protected].

updates to the CSS spec?

You can use post CSS compile that.

native CSS nesting Does it make sense to go vanilla CSS But does it make sense for people who are on SaaS or like you're starting a new project? 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.

overall because 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.

developers.chrome.com, 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.

always, almost always indicate the parent due to how CSS parsing works. But, Wes, has there been in most browsers except for Safari. It's under consideration Firefox.

the the syntax for this a bit because the SaaS version of the syntax

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, just bundle all your CSS into a single file, really something you could I guess you could polyfill it with JavaScript, well, I'm gonna write to the spec

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

when the new version of this came out or when it was released,

want to use native nesting if you're already getting the same nesting features from CSS? Well, you'll be shipping less

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, Like, the way that importing works in Sass to me is, like, ideal. So,

and then apply this. You don't even have to put a name on the container.

Previously,

the new nesting rules all look super, super good. I'll have a blog post here from Adam Argo

I'm

there was the idea in CSS nesting of anytime you have,

Yeah. If you want to support all the browsers, it might still work, but also it's not a big deal just to put an ampersand in it. I was very happy with You could you could get into that as but, passing variables.

yeah.

To SASS because, like, people wanna use and then it will always give you

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, 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? It's iffy. And you might be wondering, well, why the heck would you even, Oh, that's nice. So it charges the battery. It looks gorgeous. And at night, 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

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

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,

And That's to get custom functionality. Right? Like, wouldn't it be nice to Be able to just have a named function called Darken And to do that, I needed to put in a stop. I did a stop every 45 movies, Yes. Oh, no. Oh, not not in CSS. Well, hold on.

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, Oh, yeah.

on the parent, you could say ampersand, colon, the pseudo selector, and especially when it it can compile, and that adds to reusable front to cover in 2 years.

and then inside the wrapper, I want to select 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.

Criticizing

because you're not having to think about The selector nesting as much anymore.

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

you have to use the ampersand div. And there's some Lea Veru has a very good

Like you could say

it was huge for me. I I It really changed how I wrote CSS. It made my CSS better in many ways, Houdini has kind of just like

Leadership there is pretty rough 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,

Unfortunately, But Safari at least has in development for some of them, and it has shipped one of these. So

Around the time that we started this podcast.

You know, as a listed browser. So I I unfortunately, your CSS in your JavaScript, and your server would walk the entire import tree.

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

especially individual developers. Holy cow. But on the flip side, 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,

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

Nowadays, if you think about doing

folks

website that showed, in that sort of way. Or are there other to the to the degree where it is now. But what's so cool about this is you even have native

To to actually

kind of thing here. Mhmm.

Okay. I I I wish I had a screenshot of this from when we first started the podcast.

under consideration augmenting the current properties

implement them, which is

these these effing dweebs that Firefox can't get their s together. Yeah.

the momentum behind Houdini was really strong 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, who of, of people's network. You're not even considering people's network usage, Wes. Come on. You can't

Firefox,

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,

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, We haven't come up with all the strategies or techniques. I see something new every single day on Twitter that,

I would say it's not

it's not moving a lot forward,

The point was, Is that like, hey, is anybody else That does really reduce the need for,

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

I wish you probably don't

or no signal for Firefox.

What you're gonna see in this document is what I'm seeing a whole lot of in general in CSS is Firefox That you would wanna do that in the syntactically nested format. And then people got or Sass sassy CSS or SCSS or any of that stuff. But I do use post CSS today,

Unfortunately,

There are some things the paint's API 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, in terms of the syntax that's accepted for these these plug ins. And so much so that the website

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?

Right? Or was it a couple couple years after or a year after or so? There was, like, that whole, can I use Houdini

not here in CSS.

Asshats on Twitter are just like, oh, Firefox is no good.

to CSS so that we could essentially write our own properties in CSS, and that's really what this comes down to.

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

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, I go back and forth because I do think

yeah. That's not the point. The they're working really hard, and I feel, 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 functions were great inside of SAS.

an initiative to bring some of these JavaScript APIs

I don't I don't know what's going on with Houdini.

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,

That will do things to your CSS. Like, the most popular example is Auto Prefixer.

throw any shade their way because there's it's an amazing project. But I mean, And this is the first one where we're going against the spec,

move towards things that we like, we saw this with jQuery.

Compass tutorials. Like, SaaS I watched them for a long time. Yeah. Been my jam. Like, I I am a big sass head. So,

I I I do wanna say first and foremost, like, my whole career got started off on, like, SaaS tutorials,

Based on which browsers you're supporting, it's pretty simple.

And it's hilarious because even Firefox

no matter what, pretty much on every project, just to get a baseline coverage.

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.

In, in Chrome, there's probably good reason behind it, but it seems a bit silly.

to Apparently,

You have to use

the scroll bar stuff work without a vendor prefix? The we got a big banner here in Hamilton. That's an Eagle, and it marks the return of the Eagle. Like, apparently, 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? don't have as many staff as they used to, There's just not as many people to work on this type of thing.

Sass.

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

And this is also not like an anti SAS

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

was the CSS gradient.

But what's cool about post CSS in addition to

how these things are being added to the browser. So now we're not having to think so much about prefixes.

Yeah. It was, 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, that try to make money,

I found something that did not work without a vendor prefix still. What was it?

We have looked at that and said, that's a good idea. We should have that in the native language.

Dash Webkit mask instead of just straight up mask.

for your CSS. So you feed your CSS into post CSS, and then you can get a number of plug ins

supports And in the past, I've ground up Werther's and you put it in the cotton candy machine and it

compile your CSS, remove dead CSS,

We might not have to to use it anymore.

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 It's amazing.

as well because so many people are just doing that. They're like, oh, you forgot to put the regular version on.

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.

This is not an argument against compiling CSS

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, update those things outside of a

Yeah. And before I I'd become labeled as some sort of CSS purest or something like, that YouTuber did. I, well. Yeah. Anytime, basically, you need to, What? Except for Firefox.

as web standards

The webkit prefixed version

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? if you ever hear me say anything that is pro,

It will add in the vendor prefixes that are required

We might not need jQuery because

things, but that's not a vendor prefix. I made a TikTok about it. One sec. Let's pause this a sec.

Safari since 11, 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.

Let me just tell you how you would fix this. You use CSS Max, Whereas just 1 variable can be used anywhere. So it it really like, what's better? You might not know just yet, I think The only only Safari 15.4 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.

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

Now if you wanna do some some trick, I've seen some, like, really interesting

Yes. Absolute value is super useful.

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.

Speaking

I think my head would have actually exploded knowing that you could do JavaScript based functions inside of CSS, Yes. Yes, please.

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

a b s inside of the browser.

absolute position.

values 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? argument as well. There's nothing wrong with SAS.

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,

Ten times negative one. That's negative one. In both cases, Max will always return positive 10. Yeah.

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

Yeah. It just removes the negative from a number.

the higher version. Right. It'll always give you the positive version.

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

missing, but Missing. Yeah. Post CSS.

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, 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

calc min max clamp a, with Sentry, but

yeah. I don't know.

in So I'm going to give this one to Sass Today's episode brought to you by JavaScript.

There's got to be a post CSS plug in. I've never written absolute in my code base before. I just use, 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, Or shipping a bunch of extra CSS for every possible situation.

rotation 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

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

Yeah. So you could Yeah. You could do some, like, really neat, 1st,

drop what you're doing and use absolute browser.

of apps,

Before we tell everybody to use it. Yeah. Everybody

What? It is important to there That said, are those necessarily things that you need to be doing

in CSS. Did you know that? We don't necessarily know the status of this.

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

Yeah. You just have to use variables for the Upper and lower bounds Any nesting API that hit the browser had to have media queries in it. So, write 1 piece of CSS functionality

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.

Chrome since 52. So it's been Yeah. Let's see how you do this. Show you how you do this. Right? Like, I have a

and they are at different X and Y's.

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

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.

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.

And the browser based face detection will tell you 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.

Wow.

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

Should you drop SaaS?

And you can

They are so cute. It is awesome.

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

How, Like, what is

But not only that, you can preemptively, totally

Amazing.

is the perfect place to track all of your errors and exceptions and so much more.

We haven't hit all of the edge cases.

we have our kids' birthday parties at our house,

with the oh, this is a lot nicer than a lot of the, like, I think All of the, 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 you'd have to compile out to the H1 And the reason we bought it is we said, okay, We're looking at we have 3 kids. We've got Yeah. I was not I was really good at accounting.

You know, they've been sponsoring Syntax for a long time, so I have no shortage of things to to talk about,

per birthday party.

our backyard is so enchanting.

I think I've, And writing that in Sass was really nice Because you can concatenate So But for whatever reason, it's never been unfixed

Yeah. Go buy yourself a can of dielectric grease, Mhmm. And then in the initial request, it would say, alright,

We have these hanging from all the tree branches, and 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,

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?

shout out to anybody on the seeing this exact trend where 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.

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,

Buy 1 and make your it's like a really like, it's almost commercial quality. It's super fast,

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

It's unreal. So, Like, let's say I have a menu, a Houdini JavaScript worklet for that thing to be fully supportive. But nesting, you can start using it today and just compile it to

parent. Teeth are gonna rot, but

it feels like you're in just a Charming little village or something in our backyard with all these little Like a glass container the the CSS 3, please, and any of that stuff. When for a very long time and and for anyone out there who remembers 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've said this tip before, but, And I was 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, People get really up in arms. And, also, like, there's people that work hard on the SaaS project, and they don't wanna,

Interesting. I'm going to sick pick some little Could be done mathematically,

most of these features

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.

What the future looks like and given that you can replicate 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?

Alright.

Oh, yeah.

they brought in, like, 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, the color contrast stuff, a lot of the nesting stuff,

fan.

That is amazing. When I saw you bought that, I was like,

They are junky, 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.

Head on over to syntax.fm not syntactically nested, but nested in terms of the specificity order. Right?

This feels incredible. I'm gonna be, plugging this one now. [email protected] Yeah. Me too. I've been doing it for a while.

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,

just spins a Wortherd flavored cotton candy.

their Filing or their performance metric tracking, which is incredible.

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

take care of problems with, their profiling or

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.

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

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 spray them into where the

But if I were to start a new project today,

hear me out. So, Mozilla because, like,

Sort of lean into the CSS way of doing things and being okay with relearning some types of things.

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.

And you can make amazing quick cotton candy for the birthday party. It's super fun, that's the main thing. And if people are Stop being using Firefox because it doesn't support features.

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

the the lines doing a

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.

impact.

Had a cotton candy machine at their fair last year, and

But right now, 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, I I remember using looping for a Full archive of all of our shows.

American, like, 2.50 Canadian.

using the current CSS techniques, and I say, You might be, Yeah. You might be thinking, what are we what do we download later? Might be some CSS.

would be fully replaceable without post CSS.

because because of the

initiatives are in. Yeah. But I I do wanna go back to

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

adds a feature to CSS because

all the darker, lighter, the 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?

Yeah. Well, variables was replaceable.

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 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,

things that Hanging solar lanterns that are cute for the backyard. Oh. Courtney Courtney ordered these things. And,

will will even tell you what stage the current, And I I think that This is some I thought on my calendar, I was like, is that thing?

accent colors based off of that, which is really cool. Super cool.

Specifically for

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 and it really shows you a lot of, like, a Ton of practical examples in terms of

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.

the expanded selector. And I don't I don't lose anything. Yeah, I I was when I was thinking this, if it's There's a little fairy lights inside of a little glass jar. That glass jar is a solar panel connected to a battery backup.

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.

Go back to listen to those color episodes if you want to learn more about colors

To use color mix,

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.

fully replaceable,

compile, transpile, shout out to them. I just wish that

layouts went. We had to do a whole lot with classes in the past 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

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.

to do grid systems What? That's a JavaScript. Transition.

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

Oh, no. So that that's why I was interjecting there. Yeah. I think you're always gonna be using, mix ins in general. There was a proposal, CSS, 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

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, like a function to just drop into your code with context.

whether that was a good, Better, plausible yes. It's been supported Yeah. So it's very close now. The only kind of gotcha

In SaaS, you could write essentially a loop to do something. Right? You have,

There's not you can use an arrow function. And if you need to support IE6, a web font here. Let me download that. And that's a waterfall. Right? Like every request, Oh, it and then the colon and you open up curly brackets. And inside of that, you put 8, 15 different CSS properties.

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

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 using The post CSS import. So to me, it's fine in my current setup,

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

there's no features 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

like you said, that nesting is replaceable, shipped

in upcoming features. Yes.

That's not CSS, right? Back to unnested CSS so you could start using it today variable IE since IE 10, 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

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, generating those. So you could do dot card We saw this with jQuery as well.

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, Yeah. That's 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,

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.

But the the upside to the built in color functions is that Once they are supported in all the browsers, this is not

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 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,

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

Did a great job of hosting this thing, and they even had some,

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 And Yeah. They obviously have a lot many, many, many projects

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

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

When is Easter? And she gave me a look like, come on, man.

I'm doing good, man.

with kids

Yeah. How how you doing today, Scott? 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 a long time. Hold on. No, this is wrong. That's CSS property be compiled to regular selectors, and

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, Or extends are the way to, examples using these animations and and being able to animate things. I'm not using them yet. But hey.

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.

But then again, I I asked Courtney on Saturday, as essentially props,

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.

downloads that and then it parses it. And if there's an at import in there to, like, typography, 17 years worth of birthdays ahead of us. And our kids school 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.

have this with JavaScript modules as well is that

not right. Seems a bit odd, doesn't it? You know? which is 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 selectors onto each other, 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.

is there. The the syntax is largely what everybody uses in Sass anyways. It's just

and until it downloads and parses the file. So I don't know how the browser could ever solve that. There was a proposal

because the state of a lot of Firefox stuff is that they another version. With a lot of this stuff, I sort of see myself saying, 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

tag in Google Fonts does. Yeah. This is seems like prime territory

would parse Bundler transformer

Against that right now or there's 2 couple solutions. 1st,

I like 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

about Oh, we we forgot to say whether 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

Let's import that one. Okay. Got it. And then there's 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, show me the stats that this is is slower.

Partials is the next one. You want to include

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,

Where the server

I don't know enough. Am I?

Yeah. It's it's A lot of the stuff you use with mix ins can be replaced There we go.

The functionality.

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.

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, it does what's called waterfalling of your request. So if you have style. Css, it's better to do

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, 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.

At import in CSS is Generally frowned upon

And what that does is as soon as the HTML of your page is parsed,

Yeah. Totes. So the answer to that one is, 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.

I don't know. Not impact you negatively.

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.

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

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 Right. Does that make sense?

A glow up in CSS. It feels like the syntax

Everyone says there was a couple things that was, like, proposed, but they got scrapped. There was also, like, a hinting header

it doesn't because it's a browser problem. And the only solution Looping.

CSS in separate files. It's really nice to be able to organize your CSS into lots of different files

Yeah. I 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

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.

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 chooses whether it should Next one we have here is CSS nesting. This one just dropped as well,

Yeah. I remember the the first time I encountered import heavily was within the Magento

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.

Little bits that load on the pages that are needed.

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

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

ES modules does this as well. And I had thought that, oh, HTTP 2 gets it gets rid of this, but

yeah, that is a missed feature. I do use post CSS to do the same thing

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 Colors

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

But one of the thumbs up for SAS is that you can get a nice

Title because

So we'll see. I think we'll that's a clear one And then you have another selector

so you might have something like card,

inside of CSS where you

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

which actually has good support. Yeah.

for

ampersand underscore underscore but What color was it? It was it was red. It was red to red. And

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

SaaS And a cotton candy machine is, like, $200

It is actually shipped in Chrome

ampersand

in the CSS spec.

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 then you might have an element inside of that card, You only need the ampersand when you are doing

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,

replaceable thumbs up. We're gonna give it a

all of the features I'm not really sure, but show me that info.

Can vanilla CSS replace alright.

or a no. Missing fast is Still better? And I wanted to be like, well, like, when the kids are old enough, take our cotton candy machine,

plausible

It's, like, kind of a Mythbusters type of thing here. Kind of a Mythbusters.

of Sass? We talked about we have nesting now in CSS, and import them.

There's been no bald eagles in Hamilton for 40 years or something like that, and, apparently, their numbers are up right now, which

a lamp post. Or you'll just see them on Reddit, photos of bald eagles. 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,

is pretty cool to I'm not I'm not a patriotic American, but I do like the cool bird.

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, Variables are extremely well supported in all of the browsers.

Easter is a big hit for her.

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, especially on the Firefox