Prefer video?
In this brief article a want to give you some reasons why you should stop writing CSS and start writing SASS.
At the ...
For further actions, you may consider blocking this person and/or reporting abuse
CSS has variables though.
Actually, I believe that CSS variables are better than SASS's, for two main reasons:
Personally, I like SASS and I use it all the time, but I've started using native variables for the aforementioned reason.
Here is a small pen that demonstrates how those two can work together and how easy it is to manipulate them with JS (and a more detailed explanation here).
Yeah, I agree they are better than SASS variables. I am also pretty sure that some CSS frameworks are using CSS variables to allow you to customize the theme colors which is a bonus when you don't want to style stuff but you want to dynamically change the theme colors.
Thanks for sharing you knowledge Giorgos, I totally agree, I didn't know about the root thing... and thanks for the article :)
CSS has math too
Yes i knew that comment was coming hahha, but are not the same as SASS one
Sass variables are definitely not the same as CSS variables. Sass is a pre-compiled language; therefore, you never run sass in the browser. Sass compiles your code into regular css. It doesn't use CSS Variables. Here is an example sass file:
and the compiled file:
As you can see, we don't have to use the CSS variables which aren't supported by all browsers.
I don't think writing sass is not writing css. In the end you are using another syntax but all css problems are still here.
The syntax is a matter of taste. Nesting is a very bad idea as you have to mentally rebuild the full selector in your mind.
CSS has custom properties, that are way more powerful than sass static variables.
Math is possible via calc, which works with custom properties and in which you can mix units so it's also more powerful than sass maths functions.
Most of your points are not valid and are easily replaced with native CSS feature. Only logic and function are really useful, but should be used carefuly. Because you can have easy to read sass code that generates garbage css (for example nesting that encourages looooooong selectors that could actually have been a single class)
The title was only a way to improve my "clickbait" skills 😅️
$color: #000
Is cleaner than
:root {
--epic-var: #000
}
To me at least
There are tools to make it much "cleaner" for creating CSS variables. SwordCSS is an example.
I prefer to have the brackets (curly braces). That to me is cleaner and easier to understand the scope and intent of a given block of css/scss/sass.
Me too and the
{}are called curly braces☝️
I have used scss for a while but right now i find myself loving sass, i think the thing that i hated the most was without doubt semicolons 😂️
The thing with Sass syntax is that it's not a valid CSS, while SCSS syntax is a superset of CSS. You can copy and paste any CSS and it'll work immediately in SCSS, without any need of reformatting, removing curly braces, etc... And let's face it, SCSS syntax is more popular than SASS (just look at the most popular libraries using sass)
Imho it's not about popularity, but about how the help me with my work, I've really enjoyed writing PUG code and then copy and pasting it in SASS and that helped me a lot!
I believe that what he means is that CSS variable are not as clean as SASS ones...
As far as i know the don't work in the same way, cause the Sass variable convert for example the color to the hex code... anyway calling $color1 is not like calling var(--color1)... at the end this is only my opinion :)
Lots of amazing reasons! But remember that CSS also has math which is more advanced since it can do calculations between different units. About variables: yes CSS does have variables that are much more powerfull with default values and dynamic characteristics. But this has a performance overhead unlike sass variables that are compiled into normal values at compile time
If you are using a component based framework, you should forget css preprocessors altogether.
Css in Js frameworks are the future. They allow you to use conditions, Js variables, composition, scoping, theming, etc.
If you do REACT take a look at JSS, styled components, emotion, etc.
They still generate css in the end.
Very nice list! I’m a big fan of SASS. The only danger in SASS is that it can get pretty messy to refactor. If you don’t take on a certain structure like BEM it can be challenging in large codebases.
Nicely done! 💪
I prefer the SCSS version to SASS. I've noticed other devs prefer it, too. For some reason I find it easier to read. Also, mixins are overrated and hard to manage (the same reason Vue did away with them in js for Vue 3.0).
While I do agree that SASS is a new and trending software that makes CSS easier in some fields, I don't think you should particularly stop learning CSS, as that's the most widely used and is the foundation of SASS itself. I probably copied someone else's comment on accident. If so, sorry about that.
These are good points to get beginner web developers to start learning SASS though!
I absolutely agree the same applies to html if you use pug or js if you use react!
I, a CSS purist, take this as a personal insult....
Just kidding. Awesome article, though CSS does have variables(custom properties) and calc()
hahhaha yeah but i still prefer the $variable instead of var(--variable), in my opinion is much cleaner... Thanks for sharing
Hey! I know...
A wild guess: you're a PHP dev? PHP variables also look like that...
Nope More into Vanilla Js ExpressJs and company hahah you?
Ook...
I have tried PHP. Ruby seemed stupid. And don't speak of NodeJS. The only time I was really frightened was when I saw NodeJS with a knife trying to steal Ruby Gems in one of my scariest nightmares...
[Beware: self plug]I am working on a CSS library called FluidCSS
Feel free to check it out and please do contribute if you are interested...
It's in v0.5 currently....
Links:
nikhilmwarrier.github.io/fluidcss/
github.com/nikhilmwarrier/fluidcss
Hahahaa
Really cool FluidCSS thanks for sharing :D
Great article, thanks. Bookmarking this, since I've been planning to try SASS soon
Wow thanks Marian :D
Good article. I like your writing style but I disagree with the premise.
I wrote a reply to it
7 Reasons you SHOULD write CSS
George Nance ・ Nov 2 '20 ・ 2 min read
Wow thanks George it's always a pleasure to learn :) I will absolutely read it
Nice article. The way you presented .... Wonderful.
Thank you Manish :D
what about tailwind?
Personally i prefer to create or reuse my set of classes :)
How about Less, Stylus, PostCSS or Styled Components? Should we also abandon them?
I don't think so, i can't comment about those cause i neve used them only heard about them, but i could say in my opinion that it will be always better than writing clean css...
So, you didn't use any pre- or postproccessor except SASS and decided to write an article, giving everybody opinionated advice regarding switching to SASS. I think you should invest more efforts into building prior knowledge before writing an article or tutorial. Otherwise, the value of the article is close to zero. Sorry.
If you read carefully the title i didn't say the best pre-processor but it was about why people should switch from css to sass; I said that i haven't used them but that doesn't mean that i haven't read about them. Everyone do his research but that doesn't mean that you have to use 300 things before you talk about one in particular.