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, often begins the dialogue with one thing he has been occupied with. On this specific assembly, he requested us about Sass. He requested us if we used it, if we preferred 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 chance to write down and to share among the issues that I’ve been occupied with 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 discuss it on his then-new podcast, ShopTalk Present. I had been eager about redesigning my private web site and I believed it will be an amazing 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 follow as I constructed a brand new model of my web site. The ebook recommended 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 may not all the time have the possibility to make use of Sass, and I needed to proceed to construct my CSS abilities.
It was very simple to rise up and operating 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 surroundings to rise up and going shortly. I didn’t even have to make use of the command line. I simply pressed “Play” to inform my pc to observe my recordsdata. Later I realized how one can use Compass by means of the command line. I preferred the simplicity of that device and want that at the very least one in every of right this moment’s construct instruments integrated that very same simplicity.
I loved utilizing Sass out of the gate. I preferred that I used to be capable of create reusable variables in my code. I might 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 preferred that I might 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 need to hunt for it in one other place in my code.
Quick-forward a bit…
After my profitable first expertise utilizing Sass in a private undertaking, I made a decision to start out utilizing it in my skilled work. And I inspired my teammates to embrace it. One of many issues I preferred most about Sass was that you possibly can use as little or as a lot as you preferred. I used to be nonetheless writing CSS however now had the superpower that the totally different helper capabilities in Sass enabled.
I didn’t get as deep into Sass as I might have. I used the Sass @prolong rule extra to start with. There are loads of options that I didn’t make the most of, like placeholder selectors and for loops. I’ve by no means been one to rely a lot on shortcuts. I exploit only a few of the shortcuts on my Mac. I’ve dabbled in issues like Emmet however are likely to shortly 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 troublesome issues about working within the technical area. There are loads of good instruments however some find yourself rising to the highest and others fall away. I’ve been fairly lucky that a lot 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.
At the start of this yr, I lastly jumped into constructing a prototype for a private undertaking that I’ve been occupied with for years: my very own reminiscence keeper. One of many few issues that I preferred about Fb was the Recollections characteristic. 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 needed a solution to view reminiscences from different days apart from simply the present date.
As I began constructing my prototype, I needed to maintain it easy. I didn’t need to need to 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 spotted it.
However my code was working. That’s once 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 trustworthy, I misplaced observe 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 a giant concern to me proper then.
I used to be amazed once I realized that nesting works simply the identical means. And it was in that second that I started to marvel:
Is that this lastly the time to un-Sass?
I need 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 course of writing a collection known as “Un-Sass’ing my CSS” as I began occupied with scripting this put up. I really like the time period “un-Sass” as a result of it’s simple to recollect and so spot on to explain what I’ve been occupied with.
Here’s what I’m considering:
Customized Properties
I knew that loads about what I preferred about Sass had began to make its means 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 possibly can assign a brand new worth to a customized property in a media question or in a theming system, like mild and darkish modes. That’s one thing Sass is unable to do since variables grow to be static as soon as they’re compiled into vanilla CSS. You can even 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 (mild and darkish) for a shopper undertaking. I additionally used them a number of occasions with JavaScript and preferred 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 utterly converted to utilizing them in any new code that I write. I made use of customized properties extensively once I redesigned my private website final yr. I took benefit of it to create a lightweight 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 (often a guardian). Which means that you now not needed to write out the complete descendent selector as a separate rule. You could possibly additionally nest media queries, characteristic queries, and container queries.
This means to group code collectively made it simpler to see the relationships between guardian and baby selectors. It was additionally helpful to have the media queries, container queries, or characteristic queries grouped inside these selectors quite 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 start out 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’ll be able to write simply as you had been writing it in Sass. I’m very joyful about this variation as a result of it means native CSS nesting is rather like I’ve been writing it in Sass.
/* 2025 */
.footer {
a { colour: blue } /* At the moment's legitimate syntax */
}There are some variations within the native implementation of nesting versus Sass. One distinction is that you just can not create concatenated selectors with CSS. For those who love BEM, you then in all probability made use of this characteristic in Sass. However it doesn’t work in native CSS.
.card {
&__title {}
&__body {}
&__footer {}
}It doesn’t work as a result of the & image is a stay object in native CSS and it’s all the time handled as a separate selector. Don’t fear, in the event you don’t perceive that, neither do I. The necessary factor is to know the implication – you can not concatenate selectors in native CSS nesting.
In case you are eager about studying a bit extra about this, I might recommend 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 old-fashioned.
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 reason why to contemplate un-Sassing.
My recommendation is to watch out with nesting. I might recommend 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 which may be harder to override in different places in our codebase. Maintain it easy.
The color-mix() operate
I preferred utilizing the Sass colour module to lighten or darken a colour. I might use this most frequently with buttons the place I needed 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() operate in native CSS permits me to do the identical factor and I’ve used it extensively prior to now few months since studying about it from Chris Ferdinandi.
background-color: color-mix(in oklab, var(--color), #000000 20%);Mixins and capabilities
I do know that loads of builders who use Sass make intensive use of mixins. Previously, I used a good variety of mixins. However loads of the time, I used to be simply pasting mixins from earlier initiatives. And plenty of occasions, I didn’t make as a lot use of them as I might as a result of I might simply plain neglect that I had them. They had been all the time good helper capabilities 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 capabilities 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 preferred with the ability to outline my typography and spacing as relative and creating relationships in my code. I additionally had written a operate to covert pixels to ems for customized media queries that didn’t match throughout the breakpoints I usually used. I had realized that it was a a lot better follow to make use of ems in media queries in order that layouts wouldn’t break when a person used web page zoom.
Presently, we would not have a solution to do mixins and capabilities in native CSS. However there may be work being achieved 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 capabilities for. I needed to calculate em models from pixels in a customized media question. My normal follow is to set the physique textual content measurement to 100% which equals 16 pixels by default. So, I wrote a calc() operate to see if I might replicate what my Sass operate offered me.
@media (min-width: calc((600 / 16) * 1em));This tradition media question is for a minimal width of 600px. This might work based mostly on my setting the bottom font measurement to 100%. It may very well be modified.
Uninterested in tooling
One more reason to contemplate un-Sassing is that I’m merely drained of tooling. Tooling has gotten increasingly more advanced over time, and never essentially with a greater developer expertise. From what I’ve noticed, right this moment’s tooling is predominantly geared in the direction of JavaScript-first builders, or anybody utilizing a framework like React. All I would like is a device that’s simple to arrange and preserve. I don’t need to need to be taught a posh system with a view to do quite simple duties.
One other subject is dependencies. At my present job, I wanted so as to add some new content material and kinds to an older WordPress website that had not been up to date in a number of years. The location 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 might add CSS to model the content material I used to be including. It took me a bit to get the settings right as a result of the settings within the repo weren’t saving the processed recordsdata to the right location.
As soon as I lastly bought 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 location to the right syntax, permitting me to write down new code that will 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 a number of strains of CSS to model the brand new content material I used to be including to the location. So, I made a decision to go rogue and write the brand new CSS I wanted straight within the WordPress template. I’ve had comparable experiences with different legacy codebases, and that’s the kind 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 may get to the purpose the place you possibly can add new code and have it compiled.
All of this has left me uninterested in 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 combination of share and pixels values in a minmax() operate and Sass was making an attempt to judge it as a math operate and the models 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 operate:
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 might 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 uninterested in having to mess with tooling. It’s one more reason 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 searching for.
However you in all probability usually are not stunned. When you have been working in internet growth even a brief period of time, you already know that there are only a few definitive methods of doing issues. There are loads of totally different approaches, and simply because another person solves it otherwise, doesn’t imply you’re proper and they’re unsuitable (or vice versa). Most issues come right down to the undertaking you’re engaged on, your viewers, and a number of different elements.
For my private website, sure, I wish to un-Sass. I need to kick the construct course of to the curb and eradicate these dependencies. I might additionally like for different builders to have the ability to view supply on my CSS. You’ll be able to’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 might 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 recommend un-Sassing it. There may be means an excessive amount of code that must be refactored and I’m unable to justify the fee for that type of effort. And truthfully, it isn’t one thing I really feel motivated to sort out. It really works simply advantageous 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 undertaking could also be totally different and there may be extra beneficial properties from un-Sassing than the undertaking I work on. Once more, it relies upon.
The way in which ahead
It’s an thrilling time to be a CSS developer. The language is constant to evolve and mature. And day-after-day, it’s incorporating new options that first got here to us by means of different third-party instruments similar 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 fashionable approaches could be a greater means ahead.
That doesn’t imply we’ve got to return and “repair” all of our outdated initiatives. And it may not imply doing a whole overhaul. Plenty of newer strategies can stay aspect by aspect with the older ones. We’ve a mixture of each Sass variables and CSS customized properties in our codebase. They don’t work in opposition to one another. The beauty of internet applied sciences is that they construct on one another and there may be often backward compatibility.
Don’t be afraid to strive new issues. And don’t choose your previous work based mostly on what you already know right this moment. You probably did the perfect you possibly can given your ability degree, the constraints of the undertaking, and the applied sciences you had out there. You can begin to include newer methods proper alongside the outdated ones. Simply construct web sites!
