SASS vs CSS - What to use and when?

CSS is an easy and straightforward language, but when it is gets too long, say for a big project with thousands of line, it turns into a nightmare.

But Sass makes CSS fun again.

Sass, Syntactically Awesome Stylesheets, is an extension of CSS3,
adding nested rules, variables, mixins, selector inheritance, and more.
It’s translated to well-formatted, standard CSS using the command line
tool or a web-framework plugin.

Why and what to use?

At the end of the day Sass when compiled renders css so the only difference is taking advantage of all of Sass mixins variables and features that it brings to make css development easier.

So if you want to work smarter and not harder use Sass, there’s nothing wrong with using vanilla css either.

Keep in mind not all workflows and IDE’s make it easy to use Sass (I’m looking at you VS) but it’s getting better, it’s all a matter of preference.

Thankfully, CSS is valid SASS, so you never have to decide up front. I recommend using regular CSS for as long as you don’t feel a particular need for SASS features, then switch over when the engineering effort seems worth it.

1 Like

how different sass or css

When I initially began down the way of CSS preprocessors I was overpowered by the distinctive alternatives (backtalk, less, stylus), the distinctions in the sentence structure, and above all I had no clue how I should begin with this new way to deal with composing CSS.
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}

.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

Somewhat more reply: Sass is better on an entire cluster of various fronts, yet in the event that you are as of now glad in LESS, that is cool, at any rate you are helping yourself out by preprocessing.
$blue: #3bbfce
$margin: 16px

.content-navigation
border-color: $blue
color: darken($blue, 9%)

.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue

I think most about the time nowadays on the off chance that somebody specifies that they are working with Sass.