DEV Community

Cover image for Is anyone really using SASS anymore?
Rob Kendal {{β˜•}}
Rob Kendal {{β˜•}}

Posted on

Is anyone really using SASS anymore?

OK, bit of a hot title, of course people are, hell I'm still using it. But, I had a question from a mentee the other day about 'what is SASS?' and 'what is the difference between SASS and CSS?'.

Of course, I answered those, but it got me thinking about the relevance of SASS in today's front end workflow and tooling...

CSS itself has given us native solutions to some of the problems SASS originally solved (e.g. variables), and we've got so many options for development these days with Styled Components in React, Tailwind CSS, CSS-in-JS, etc. and dynamic imports are coming in JS.

So my questions are this:

  • Do you think SASS is losing relevance or usefulness in today's landscape?
  • Are you still using it? Why? Why not?
  • What other tools do you prefer or have started adopting in SASS's place?
  • Do you have any tips, tricks or advice on being productive with modern CSS?

Discussion (22)

Collapse
abhinav1217 profile image
Abhinav Kulshreshtha
  • I don't think sass will lose it relevance any time soon. Even in today's landscape. Recent css features are cool but using them is cumbersome compared to what sass have. And compiling scss to generate so called CSS4 file is best of both world. Take a read on this article codepen.io/jakealbaugh/post/css4-v.... This article and its update demonstrate how we can utilize best of modern css features while still having coding convenience of scss.

  • I am still using scss because I hate using large css framework. Using scss gives me benefit of having a semi-actual programming language to create optimised css for the site. I was also inspired by 2014 talk from Heydon Pickering for a clean and minimal css approach.

  • I have used tailwind with sass for quick prototyping. But for production, I would still keep sass ui project.

  • My tip is to watch "heydon pickering | effortless style 2014". It will change the way you approach styling. Also Blogs on codepen are great resource. My fav author is Jake Albaugh and Chris Coyier

Collapse
lukeocodes profile image
@lukeocodes πŸ•ΉπŸ‘¨β€πŸ’»

I've been using Tailwind along with PostCSS and it's made me really love not using SASS.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited

I used Tailwind only for a few days, and it feels like Bootstrap or Bulma as well, but more fully featured and far more customizable.

I decided to quit, as it is a dependency as well. I prefer Vue SFC with scoped SCSS instead; but this is limited to SFC like Vue or Svelte.

Even when I use Gatsby or React, I prefer @emotion as inline styles, not as styled components, but maybe I am not a proper user of React.

Collapse
kendalmintcode profile image
Rob Kendal {{β˜•}} Author

I'm just discovering Tailwind and I must admit I didn't get it at first, but it's very powerful and I'm loving it the more I use it :D

Collapse
lukeocodes profile image
@lukeocodes πŸ•ΉπŸ‘¨β€πŸ’» • Edited

You can end up with class soup while making your own components out of it, but you can use PostCSS
(I do in Vue) to create semantic classes for each component, making your components tidier!

Thread Thread
lukeocodes profile image
@lukeocodes πŸ•ΉπŸ‘¨β€πŸ’»
Thread Thread
kendalmintcode profile image
Rob Kendal {{β˜•}} Author

Well I'm going to check that bad boy out :D

Collapse
iamschulz profile image
I am Schulz

Of course.
I like writing style systems instead of using the atomic css approach of Tailwind and co.
Sass (or scss in my case) helps me with three major points

  • Nesting. I write my styles in between BEM and SMACSS. Nesting helps me with namespacing.
  • Mixins. Those are awesome for helper classes that you may or may not need. Mixins don't get rendered by default if the stylesheet doesn't require it. It allows me to tree shake a library of helpers. I used to use sass-variables for everything too, but phased that out in favor for custom properties.
  • component structure. Helps me stay sane, when every component has its own file. But bundling everything up is necessary to improve the network waterfall. That's something CSS-imports can't do.

I think sass is losing relevance, but for the wrong reasons. Native css is growing and the working group is discussing things like native nesting. That would be my main reason to abandon sass for just native css.
However it's mostly losing relevance because of Utility-first frameworks. I don't believe those are the answer to complex style systems, since they're aiming to reduce relationships between elements to zero. Those can be very powerful, if wielded with care.

Collapse
bernardbaker profile image
Bernard Baker

I agree with this comment. It does provide improvements to structure CSS. And namespaces are good as well.

Vue which has scoped styling is good.

React in the other hand, doesn't. But I'm not going into Styled Components are anything like that.

Collapse
adriansandu profile image
Adrian Sandu

I think that Sass will remain relevant as long as there are major frameworks that use it. The move that Bootstrap did from Less to Sass practically buried the first one and gave a big boost to the second one.

I am using both Less and Sass because many client projects run on legacy codebases and were developed during a time when Less was more mainstream (again, due to Bootstrap). I never got to the point where I was a power user, but currently, I find it less convenient to write only vanilla CSS.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited

I am using SCSS. I would avoid indented syntaxes, as in SASS, if possible. Also SCSS is more similar to CSS.

SCSS allows me to use nested CSS and CSS variables. Well, I am not sure about caniuse.com/#feat=css-variables

There is also LESS and Stylus.

IMO, you should use at least post-CSS, to ensure compatibility.

For wholly web browser environment (no Node, no OS), I like stylis.js.

Collapse
mememe profile image
mememe
  • I don't think it will lose its relevance any time soon.

  • I am loving Sass(SCSS) more than ever. Namespacing is really helpful when working with it. It has also helped 'error'-ing when compiling so that I won't miss some typos.

  • None. I haven't any reason to move yet. If there's a chance, maybe.

Collapse
jesuscrow profile image
Paulius Varna

I hate SASS.
I hate libs using SASS.
Can you move on already?
Can you make it any harder for anyone else to use your code?
Why do you need to compile styles in 2020?
Why does the compiler not work with my OS and Node version from first try in 95% of times?

Collapse
kendalmintcode profile image
Rob Kendal {{β˜•}} Author

lol, so I'm guessing.....not a fan?

Collapse
jesuscrow profile image
Paulius Varna

It's not like I actually hate SASS.
I don't like the buggy compiler.
And I don't see any point of using SASS apart from importing some SASS.

Collapse
indigomx9 profile image
Craig Johnson • Edited

I prefer CSS Variables. I learned LESS and hadn't tried SASS. To each their own.

When I was learning front-end, many tutorials had some CSS but mostly Bootstrap 3, or Bulma, or Materialize-CSS, etc. It got confusing and limited my understanding of CSS.

I once read: "Frameworks come and go. If you want to do front-end, you need to have a solid understanding of HTML, CSS, and JavaScript." I think that was from the Odin Project?

I still go over tutorials and if they used SASS, I just use CSS Variables.

Collapse
calumjames profile image
Calum James

Variables in CSS are starting to make Sass and similar preprocessors less necessary, but the nesting is invaluable in my view, so I don’t think it should be deemed a dead technology.

In React I use Styled Components because I love making single-file components, but I’d use Sass if I were making single-file components in Vue or if I were using some other frameworks.

What I’m currently interested in is how we can share styling across native mobile apps and web apps. Styled Components seems like it could help with that, but I haven’t seen anything that would make Sass viable for that, so that’s where it may fall down.

Collapse
kendalmintcode profile image
Rob Kendal {{β˜•}} Author

I love nesting, it's my favourite part of Sass/SCSS (tbh I don't gel with Sass, but I'm a big SCSS user)! I wish I could get onboard with the styled components train but it irritates my old-school 'separation of concerns' personage....and I know, I know, we're already mixing that water with HTML inside JS....but humans gonna human...

Collapse
calildrissi profile image
Calil Drissi

I think if we can reduce another tool to simply the dev process we should. personally I'm always on the watch for reducing my toolchain...I would say today's css native features get the job done perfectly, I see no reason adding more complications to the dev process.

Collapse
yizhuang profile image
yi

I am still using it, combined with css module. It's amazing.

Collapse
chrisdemars profile image
Chris DeMars

Scss for the win! I use it all the time. Sass on the other hand....meh.

Collapse
pangamma profile image
Taylor Love

You may as well ask if people still use for loops anymore. Are you kidding me? I made an account just to comment on this. YES it is still useful.