Sass, scss, less, and why/when/which/where to use them?
After developing a little project that is still ongoing, I have learnt a lot about html and css, although still dabbling in JS. This being said, I heard people talk about sass and scss, but since I had a deadline I didn't stop too much to think about those. Now that I'm looking more into them, they seem quite interesting and like a potentially good resource to use. Looking online, however, I've seen mixed opinions. A lot of people recommend them for everyone, others for big projects, and some just prefer to stick to plain CSS. And trying to look up what the difference is, I've only found sorta vague info like "sass and scss are the same but sass uses indents while scss uses {}, etc", and I am frankly a little confused. Sorry if the following is a lot of questions, but I am just very curious for input from people who work with these:
- How worth it is it to use these as a personal developer?
- Which one is recommendable over the other ones, in your opinion, and for what reason? Or perhaps there's no considerable difference?
- If one wants to stick with base CSS, is it a sort of voluntary hinderance?
- What size/scope of project would definitely require these?
88 Replies
This is a classic question that can only be answered with "it depends"... you don't need a CSS pre-processor, it just makes some tasks easier.
what he said, basically
sass also extends the syntax of the css, even the nesting, to do things that regular css can't
(just as a point of house keeping and future reference, this is more of a question for #discussions than #front-end. No need to move this there, but if you have similar general questions that's where they're supposed to go)
if i had to pick, i would pick based on how lazy my personal project is meant to be
Agreed, let's keep it short. For me:
- SCSS because using brackets feels more natural to me given how CSS already uses them.
- Any project that needs to have enough rules that makes it worth to split it into multiple files, if nothing else for organization.
- Mixins make some things like media queries or dark theme easier to handle (at least for me).
functions make stuff easier, like variables and colors
Consider also that you can default to use SCSS and still write CSS normally, since it would be valid anyway. So you don't really lose anything.
yup, all valid css is valid scss
(when i say "sass" i mean "scss", by the way)
And when I say SCSS I mean SASS 😂
Whatever, same difference
it's just horrible python syntax vs normal css
curly braces FTW
there's a lot of stuff that is worth it with sass, like having a file to configure all the colors and sizes and make repeated selectors a lot easier for browsers that can't accept
:is and :where
i actually like python, but the sass syntax is just hot steamy garbage, in my opinion
better just use scss's syntax and live happy
What size/scope of project would definitely require these?for this specific question, none require it but it makes collaborating A LOT easier, specially if you have a good file structure
Yes, I think we should ask why not to use SCSS at this point. Probably only for simpler projects, but then again just the ability to organize files logically makes it totally worth it.
Noted!!
well, a self-contained awful project is a good reason to do not use scss
but for everything else, if you have a good workflow, integrating sass is just painless and a very good idea
And I see, these are actually very helpful answers!! I do like that one can just use css normally when using scss, and overall just having the same syntax. I will look into these both but I think I have a little better grasp on them. So if I use scss I'm assuming that i'd just have to learn the syntax of sass but most other things would be the same (and vice versa) ?
well, yes but actually no but yes
sass is to css what typescript is to javascript
some additional things such as loops for example and variable declaration (all though u can still do css like declaration) those have some new syntexes but 90% of scss is just vanila css
and with that, comes a lot of stuff that's impossible in css, like loops and new functions and the glorious mixins
and even css now has nesting, that makes it even more like css
yes, but the sass nesting is just amazing
yaa
xD
though it's important to remember that scss just compiles down to regular css. Nothing that you do in SCSS is impossible in vanilla css, you just get super big shortcuts in writing it
I don't like the fact that in css u need to add the & all the time
Ah yes, I had seen those other features and knew that the preprocessors could do things in an easier way!! My question was between preprocessors, is there anything that sass doesn't have on scss or the other way around, for example?
afaik sass and scss are the same thing, just a different syntax
sass being the weird indentation dependent one, and scss being a superset of css syntax
sass also has modules no?
idk if scss has it
scss even just stands for "sass-y css"
yes, they do
like
@use sass:math it's the same thing: https://sass-lang.com/documentation/syntax/
Sass: Syntax
Syntactically Awesome Style Sheets
dats nice
Sass supports two different syntaxes. Each one can load the other, so it’s up to you and your team which one to choose. * SCSS * The Indented Syntax
Ohhhhhhhhhh
I thought they might have been two separate things
So, in summary: use SCSS and enjoy 😄
what i meant isn't that it makes css do impossible things, but things that you couldn't do with just plain css
i feel like scss better
makes it feel more natural xD
and idk, i feel like curly braces makes it more readable
it's the same, but one is just (s)css and the other is just unusable
well, it lets you do things with css that would be impractical to write by hand, but it still just produces vanilla CSS output
i think you aren't understanding what i meant, but you're right in what you said
let me try to find my cursed code from 2 weeks ago
probably don't bother, it's not really relevant to the discussion and I'm heading offline 🙂
just wanted to make sure that someone trying to make a choice between vanilla and sass knew that sass cannot make a browser do anything that css and some time typing / generating couldn't do
yes, that's basically it
but then you can do stuff like this:
which is cursed, but can be extremely useful
and this is something you can't do with css
but the end result will always be normal css
I mean, it compiles down to vanilla CSS
so you can
it just takes a lot of typing
can you escape the nesting in vanilla css?
you're running an
@each loop, which will generate code. You can generate that code yourself using a keyboard.
you say yourself it turns into vanilla CSSyes, but what it is doing is impossible with css, currently
but the final result is pure clean vanilla css
i think jochem here is saying whats equivalent to all languages get compiled to binary
while the other person saying what's equivalent to saying some languages r easy and some r hard xD
I think both are on different page xD
in css, if you nest, you can't escape the nesting
then it's clearly not impossible, it would just be more verbose like the generated CSS sass produces
Either way I get what you both mean !!
It's useful to not have to type the same things over and over for repetitive tasks like this
yes, but remember that the final result has to be proper css
While either way still being able to combine it with CSS because it's not just a whole new language
well, it's what's called a "superset"
it's actually a rule of thumb in programming thay you don't repeat code
it's a better practice cause it makes your code cleaner xD
it is a whole language that's piggy-backing another base language
and the output of compiling that language is the piggy language
when you compile scss, you get css
when you compile typescript, you get javascript
u can also try checking out
pug that's for html
that's also a nice preprocessor
helps u code fasterOh, that one I hadn't heard of
yaa it's nice
Will look into it as well!!
they aren't hard cause the base language html itself is basic and easy
it's just the syntax that's different
Yeah I mean, anything that cuts down unnecessary time and convolution is always welcome
yup, and sass helps a lot with that
btw does astro lets u use pug in it?
i don't use astro
so, i have no idea
i use php for the backend
i was wondering is u can use pug with react, i found out babble does let u do that but i saw that the syntex is just messed up 😂
hmm k no prob xD
i mean, react makes it so you have to use cursed stuff like
<> and </> to avoid giving your code a serious case of divivitisahahah
Pug+stylus 😋
i didn't coin that term, by the way
i heard that stylus is better, but never tried it
react is already cursed enough and when I saw how the syntex goes with pug
i said, nope.. life is already enough messed up
Stylus?
You would hate it from what you said above 😂
i mean, it has dot-syntax for maps
instead of the horrendous
map-get($variable, 'key_name') ...
or whatever cursed thing it uses
another language that generates cssI think with Vue and if you use Svelte-preprocess I had talked them into adding support but now they use vite-preprocess by default
Ahhhh
Yea it's the one you left out hehe
sounds good
So how does vue fit or break with the whole sass less thing?
Sorry not vue
Stylus lol
If nothing else I'd always use PostCSS if I already was using a bundler typically with SCSS too.
Just cause postCSS plugins are awesome.
Could you give me an example? Also I had never heard of PostCSS before either lol, so I am gonna be asking a lotta questions if everyone keeps mentioning more interesting things
PostCSS Plugins
Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.
Too many to give examples
But I use autoprefix, one the merge media query ones, font face, ummm 🤔 then kinda depends.
You can write lots of modern CSS with a few too, and not have to worry as much about support, as it will compile to polyfill or fallback for you.
Huh, this is all very interesting, and while I would love to explore all of these, I think this is a little overwhelming will all the different options. Why would someone use PostCSS over scss, for example? Or does it even matter which one I choose? I'm not even a front end dev!! But I do think having the opportunity to use these skills one day somewhere could be good
Like I said I use both, but you can use just postCSS if you just wanted the extra boost from plugins or using more current CSS.
or just use SCSS which ever xD
Vite is setup for both out of the box and mostly what I'm using these days too so that factors in.
It's not hard to add to most build/bundlers these days though.
Ohhh okay, I assumed that you could not use both at the same time or something, that's at least better to know
Kevin Powell
YouTube
Learn how to power-up your CSS with PostCSS
If you're going to use the preset-env, I'd strongly recommend adding the PostCSS Language Support plugin to VS Code, so that it recognizes the CSS you are writing: https://marketplace.visualstudio.com/items?itemName=csstools.postcss
PostCSS is an absolutely amazing tool, so let's see how we can use it!
🔗 Links
✅ PostCSS: https://postcss.or...
Kevin Powell
YouTube
CSS is getting better, but Sass is still relevant
🎓 Learn Sass, how we can use it with other tools like PostCSS, and how we can use it for things like theming, design systems, and general project architecture in my course BeyondCSS https://beyondcss.dev?utm_campaign=launchpromo&utm_source=youtube&utm_medium=whyiusesass (use coupon code earlybird for 20% off, valid until the 4th at midnight EDT)...
Time to add those to the queue of Kevin Powell videos to watch