A number of weeks in the past, I participated in Entrance Finish Research Corridor. Entrance Finish Research Corridor is an HTML and CSS targeted assembly held on Zoom each two weeks. It is a chance to be taught from each other as we share our frequent curiosity in these two constructing blocks of the Net. Some weeks, there may be extra targeted dialogue whereas different weeks are extra open ended and members will ask questions or carry up matters of curiosity.
Joe, the moderator of the group, normally begins the dialogue with one thing he has been fascinated by. On this explicit assembly, he requested us about Sass. He requested us if we used it, if we appreciated it, after which to share our expertise with it. I had deliberate to reply the query however the dialog drifted into one other matter earlier than I had the possibility to reply. I noticed it as a possibility to write down and to share among the issues that I’ve been fascinated by not too long ago.
Beginnings
I began utilizing Sass in March 2012. I had been listening to about it by means of various things I learn. I consider I heard Chris Coyier speak about it on his then-new podcast, ShopTalk Present. I had been enthusiastic about redesigning my private web site and I believed it could be a terrific likelihood to be taught Sass. I purchased an e-book model of Pragmatic Information to Sass after which put what I used to be studying into observe as I constructed a brand new model of my web site. The e-book urged utilizing Compass to course of my Sass into CSS. I selected to make use of SCSS syntax as a substitute of indented syntax as a result of SCSS was much like plain CSS. I believed it was necessary to remain near the CSS syntax as a result of I won’t all the time have the possibility to make use of Sass, and I wished to proceed to construct my CSS expertise.
It was very straightforward to rise up and working with Sass. I used a GUI device known as Scout to run Compass. After some frustration making an attempt to replace Ruby on my pc, Scout gave me an setting to rise up and going rapidly. I didn’t even have to make use of the command line. I simply pressed “Play” to inform my pc to look at my recordsdata. Later I discovered how one can use Compass by means of the command line. I appreciated the simplicity of that device and want that at the very least one in all at this time’s construct instruments integrated that very same simplicity.
I loved utilizing Sass out of the gate. I appreciated that I used to be in a position to create reusable variables in my code. I may arrange colours and typography and have consistency throughout my code. I had not deliberate on utilizing nesting a lot however after I attempted it, I used to be hooked. I actually appreciated that I may write much less code and handle all of the relationships with nesting. It was nice to have the ability to nest a media question inside a selector and never should hunt for it in one other place in my code.
Quick-forward a bit…
After my profitable first expertise utilizing Sass in a private challenge, I made a decision to begin utilizing it in my skilled work. And I inspired my teammates to embrace it. One of many issues I appreciated most about Sass was that you can use as little or as a lot as you appreciated. I used to be nonetheless writing CSS however now had the superpower that the totally different helper features in Sass enabled.
I didn’t get as deep into Sass as I may have. I used the Sass @prolong rule extra to start with. There are quite a lot of options that I didn’t reap the benefits of, like placeholder selectors and for loops. I’ve by no means been one to rely a lot on shortcuts. I take advantage of only a few of the shortcuts on my Mac. I’ve dabbled in issues like Emmet however are inclined to rapidly abandon them as a result of I’m simply use to writing issues out and haven’t developed the muscle reminiscence of utilizing shortcuts.
Is it time to un-Sass?
By my rely, I’ve been utilizing Sass for over 13 years. I selected Sass over Much less.js as a result of I believed it was a greater path to go on the time. And my guess paid off. That is likely one of the tough issues about working within the technical area. There are quite a lot of good instruments however some find yourself rising to the highest and others fall away. I’ve been fairly lucky that many of the choices I’ve made have gone the way in which that they’ve. All of the companies I’ve labored for have used Sass.
Initially of this 12 months, I lastly jumped into constructing a prototype for a private challenge that I’ve been fascinated by for years: my very own reminiscence keeper. One of many few issues that I appreciated about Fb was the Reminiscences function. I loved visiting that web page every day to recollect what I had been doing on that particular day in years previous. However I felt at occasions that Fb was not giving me all of my reminiscences. And my life doesn’t simply occur on Fb. I additionally wished a method to view reminiscences from different days apart from simply the present date.
As I began constructing my prototype, I wished to maintain it easy. I didn’t wish to should arrange any construct instruments. I made a decision to write down CSS with out Sass.
Okay, in order that was my intention. However I quickly realized that that I used to be utilizing nesting. I had been engaged on it a few days earlier than I noticed it.
However my code was working. That’s after I realized that the native nesting in CSS works a lot the identical nesting in Sass. I had adopted the dialogue about implementing nesting in native CSS. At one level, the syntax was going to be very totally different. To be sincere, I misplaced monitor of the place issues had landed as a result of I used to be persevering with to make use of Sass. Native CSS nesting was not an enormous concern to me proper then.
I used to be amazed after I realized that nesting works simply the identical approach. And it was in that second that I started to marvel:
Is that this lastly the time to un-Sass?
I wish to give credit score the place credit score is due. I’m borrowing the time period “un-Sass” from Stu Robson, who is definitely in the midst of writing a collection known as “Un-Sass’ing my CSS” as I began fascinated by scripting this publish. I really like the time period “un-Sass” as a result of it’s straightforward to recollect and so spot on to explain what I’ve been fascinated by.
Here’s what I’m bearing in mind:
Customized Properties
I knew that quite a bit about what I appreciated about Sass had began to make its approach into native CSS. Customized properties had been one of many first issues. Customized properties are extra highly effective than Sass variables as a result of you may assign a brand new worth to a customized property in a media question or in a theming system, like gentle and darkish modes. That’s one thing Sass is unable to do since variables turn out to be static as soon as they’re compiled into vanilla CSS. You may also assign and replace customized properties with JavaScript. Customized properties additionally work with inheritance and have a broader scope than Sass variables.
So, yeah. I discovered that not solely was I already pretty conversant in the idea of variables, because of Sass, however the native CSS model was way more highly effective.
I first used CSS Customized Properties when constructing two totally different themes (gentle and darkish) for a shopper challenge. I additionally used them a number of occasions with JavaScript and appreciated the way it gave me new potentialities for utilizing CSS and JavaScript collectively. In my new job, we use customized properties extensively and I’ve fully converted to utilizing them in any new code that I write. I made use of customized properties extensively after I redesigned my private website final 12 months. I took benefit of it to create a light-weight and darkish theme and I utilized it with Utopia for typography and spacing utilities.
Nesting
When Sass launched nesting, it simplified the writing of CSS code since you write model guidelines inside one other model rule (normally a father or mother). Because of this you now not needed to write out the complete descendent selector as a separate rule. You could possibly additionally nest media queries, function queries, and container queries.
This capacity to group code collectively made it simpler to see the relationships between father or mother and baby selectors. It was additionally helpful to have the media queries, container queries, or function queries grouped inside these selectors moderately than grouping all of the media question guidelines collectively additional down within the stylesheet.
I already talked about that I stumbled throughout native CSS nesting when writing code for my reminiscence keeper prototype. I used to be very excited that the specification prolonged what I already knew about nesting from Sass.
Two years in the past, the nesting specification was going to require you to begin the nested question with the & image, which was totally different from the way it labored in Sass.
.footer {
a { colour: blue }
}/* 2023 */
.footer {
& a { colour: blue } /* This was legitimate then */
}However that modified someday within the final two years and also you now not want the ampersand (&) image to write down a nested question. You may write simply as you had been writing it in Sass. I’m very completely satisfied about this alteration as a result of it means native CSS nesting is rather like I’ve been writing it in Sass.
/* 2025 */
.footer {
a { colour: blue } /* Immediately's legitimate syntax */
}There are some variations within the native implementation of nesting versus Sass. One distinction is that you simply can not create concatenated selectors with CSS. When you love BEM, then you definitely in all probability made use of this function in Sass. Nevertheless it doesn’t work in native CSS.
.card {
&__title {}
&__body {}
&__footer {}
}It doesn’t work as a result of the & image is a reside object in native CSS and it’s all the time handled as a separate selector. Don’t fear, if you happen to don’t perceive that, neither do I. The necessary factor is to know the implication – you can’t concatenate selectors in native CSS nesting.
In case you are enthusiastic about studying a bit extra about this, I might counsel Kevin Powell’s, “Native CSS Nesting vs. Sass Nesting” from 2023. Simply know that the details about having to make use of the & image earlier than a component selector in native CSS nesting is outdated.
I by no means took benefit of concatenated selectors in my Sass code so this won’t have an effect on my work. For me, nesting is native CSS is equal to how I used to be utilizing it in Sass and is likely one of the the explanation why to think about un-Sassing.
My recommendation is to watch out with nesting. I might counsel making an attempt to maintain your nested code to 3 ranges on the most. In any other case, you find yourself with very lengthy selectors that could be harder to override elsewhere in our codebase. Hold it easy.
The color-mix() perform
I appreciated utilizing the Sass colour module to lighten or darken a colour. I might use this most frequently with buttons the place I wished the hover colour to be totally different. It was very easy to do with Sass. (I’m utilizing $colour to face in for the colour worth).
background-color: darken($colour, 20%);The color-mix() perform in native CSS permits me to do the identical factor and I’ve used it extensively up to now few months since studying about it from Chris Ferdinandi.
background-color: color-mix(in oklab, var(--color), #000000 20%);Mixins and features
I do know that quite a lot of builders who use Sass make intensive use of mixins. Prior to now, I used a good variety of mixins. However quite a lot of the time, I used to be simply pasting mixins from earlier tasks. And lots of occasions, I didn’t make as a lot use of them as I may as a result of I might simply plain neglect that I had them. They had been all the time good helper features and allowed me to not have to recollect issues like clearfix or font smoothing. However these had been additionally strategies that I discovered myself utilizing much less and fewer.
I additionally utilized features in Sass and created a number of of my very own, largely to do some math on the fly. I primarily used them to transform pixels into ems as a result of I appreciated having the ability to outline my typography and spacing as relative and creating relationships in my code. I additionally had written a perform to covert pixels to ems for customized media queries that didn’t match throughout the breakpoints I usually used. I had discovered that it was a a lot better observe to make use of ems in media queries in order that layouts wouldn’t break when a consumer used web page zoom.
At the moment, we should not have a method to do mixins and features in native CSS. However there may be work being accomplished so as to add that performance. Geoff wrote in regards to the CSS Capabilities and Mixins Module.
I did a bit experiment for the use case I used to be utilizing Sass features for. I wished to calculate em items from pixels in a customized media question. My normal observe is to set the physique textual content measurement to 100% which equals 16 pixels by default. So, I wrote a calc() perform to see if I may replicate what my Sass perform offered me.
@media (min-width: calc((600 / 16) * 1em));This practice media question is for a minimal width of 600px. This might work primarily based on my setting the bottom font measurement to 100%. It might be modified.
Uninterested in tooling
Another excuse to think about un-Sassing is that I’m merely drained of tooling. Tooling has gotten an increasing number of advanced through the years, and never essentially with a greater developer expertise. From what I’ve noticed, at this time’s tooling is predominantly geared in direction of JavaScript-first builders, or anybody utilizing a framework like React. All I would like is a device that’s straightforward to arrange and preserve. I don’t wish to should be taught a posh system as a way to do quite simple duties.
One other difficulty is dependencies. At my present job, I wanted so as to add some new content material and types to an older WordPress website that had not been up to date in a number of years. The positioning used Sass, and after a little bit of digging, I found that the earlier developer had used CodeKit to course of the code. I renewed my Codekit license in order that I may add CSS to model the content material I used to be including. It took me a bit to get the settings appropriate as a result of the settings within the repo weren’t saving the processed recordsdata to the proper location.
As soon as I lastly received that set, I continued to come across errors. Dart Sass, the engine that powers Sass, launched adjustments to the syntax that broke the prevailing code. I began refactoring a considerable amount of code to replace the positioning to the proper syntax, permitting me to write down new code that may be processed.
I spent about 10 minutes trying to refactor the older code, however was nonetheless getting errors. I simply wanted so as to add just a few traces of CSS to model the brand new content material I used to be including to the positioning. So, I made a decision to go rogue and write the brand new CSS I wanted instantly within the WordPress template. I’ve had related experiences with different legacy codebases, and that’s the form of factor that may occur once you’re tremendous reliant on third-party dependencies. You spend extra time making an attempt to refactor the Sass code so you will get to the purpose the place you may add new code and have it compiled.
All of this has left me bored with tooling. I’m fortune sufficient at my new place that the tooling is all arrange by means of the Django CMS. However even with that system, I’ve run into points. For instance, I attempted utilizing a mix of share and pixels values in a minmax() perform and Sass was making an attempt to guage it as a math perform and the items had been incompatible.
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));I wanted to have the ability to escape and never have Sass attempt to consider the code as a math perform:
grid-template-columns: repeat(auto-fill, minmax(unquote("min(200px, 100%)"), 1fr));This isn’t an enormous ache level but it surely was one thing that I needed to take a while to analyze that I may have been utilizing to write down HTML or CSS. Fortunately, that’s one thing Ana Tudor has written about.
All of those totally different ache factors lead me to be bored with having to mess with tooling. It’s another excuse why I’ve thought-about un-Sassing.
Verdict
So what’s my verdict — is it time to un-Sass?
Please don’t hate me, however my conclusion is: it relies upon. Perhaps not the definitive reply you had been on the lookout for.
However you in all probability aren’t shocked. In case you have been working in net improvement even a brief period of time, you already know that there are only a few definitive methods of doing issues. There are quite a lot of totally different approaches, and simply because another person solves it in a different way, doesn’t imply you’re proper and they’re fallacious (or vice versa). Most issues come right down to the challenge you’re engaged on, your viewers, and a bunch of different components.
For my private website, sure, I want to un-Sass. I wish to kick the construct course of to the curb and get rid of these dependencies. I might additionally like for different builders to have the ability to view supply on my CSS. You may’t view supply on Sass. And a part of the explanation I write on my website is to share options that may profit others, and making code extra accessible is a pleasant upkeep enhancement.
My private website doesn’t have a really massive codebase. I may in all probability simply un-Sass it in a few days or over a weekend.
However for bigger websites, just like the codebase I work with at my job. I wouldn’t counsel un-Sassing it. There’s approach an excessive amount of code that must be refactored and I’m unable to justify the price for that form of effort. And actually, it isn’t one thing I really feel motivated to sort out. It really works simply superb the way in which that it’s. And Sass continues to be an excellent device to make use of. It’s not “breaking” something.
Your challenge could also be totally different and there is likely to be extra positive factors from un-Sassing than the challenge I work on. Once more, it relies upon.
The best way ahead
It’s an thrilling time to be a CSS developer. The language is constant to evolve and mature. And every single day, it’s incorporating new options that first got here to us by means of different third-party instruments akin to Sass. It’s all the time a good suggestion to cease and re-evaluate your know-how choices to find out in the event that they nonetheless maintain up or if extra trendy approaches can be a greater approach ahead.
That doesn’t imply we now have to return and “repair” all of our outdated tasks. And it won’t imply doing an entire overhaul. Plenty of newer strategies can reside facet by facet with the older ones. We now have a mixture of each Sass variables and CSS customized properties in our codebase. They don’t work towards one another. The wonderful thing about net applied sciences is that they construct on one another and there may be normally backward compatibility.
Don’t be afraid to strive new issues. And don’t decide your previous work primarily based on what you already know at this time. You probably did the perfect you can given your ability degree, the constraints of the challenge, and the applied sciences you had out there. You can begin to include newer methods proper alongside the outdated ones. Simply construct web sites!
