SASS = CSS redefined?

so I’m watching a bunch of vids on Sass in prep for the back-end stuff and is it me or is Sass just css redefined? It sure looks like it.

in css-
color: #efdecd; 

in Sass-
$almond: #3fdecd;

color: $almond;

seems to me this is a very long convoluted way to define stylesheets. There’s a whole bunch more code involved with Sass vs. CSS, and it looks like just another way to “secure” job security.


In my opinion, SASS is much more that just using variables with CSS. In the given example is looks longer that CSS but when we use SASS for large projects which are to be maintained for long period of time by a big team of developers, it is really useful and beneficial.

Variables, extend, mixins and functions make SASS a great tool for creating and maintaining large CSS based projects.


It also make things faster and easier to maintain - you just have to change your variables to change the whole style. You also have functions, ways to lighten / darken a color automatically, you can do mixins to apply the same piece of code to lots of elements, you can nest your styles so it’s clearer to see what you’re targeting, but also easier to target various elements, so it’s a lot less trouble with ids, classes etc.

I certainly find it much easier than plain css - and I guess these are just the basics of sass, nothing too fancy.

It’s not just you, that’s actually how it’s intended to be. Scss (with a c) is what’s known as a superset of CSS. So, Scss has everything that CSS has, plus some extra features. You could just write conventional CSS in a .scss file and it will compile just fine.

It may seem like a whole bunch more code, and sometimes it’s a little more, but it’s for a good cause. Variables in particular offer some great advantages. They’re easier to read, for one thing (so you know that #3fdecd is… almond?). Variables allow for values to be reused easily, so you could have a bunch of elements with a background color of $almond. Even better, you could define a variable like $main-color, and assign that as the background color of lots of elements. Then, you can set $main-color to be $almond or $light-blue or whatever else you want by changing just one value.

$main-color: $tomato;

In Scss, any value can be stored in a variable and reused. Colors are one thing, but imagine being able to define very long box-shadow values once and repeat them in dozens of elements. Magic!

This sort of flexibility makes it much easier to create different color themes, set size relationships, and more. Check out my profile page’s style variables for a working example. I could probably clean that up quite a bit, but when I go to make a much-needed color refresh of my page, it’s going to be easier dealing with this one file than the 700+ lines of style code in the rest of my project.

1 Like

SASS is much more than just a rehash of CSS. Not only does it give you the extra features mentioned by @typicaljoe111, but it also makes it easier to make your code modular. You can separate all of the different sections of your code into different partial SASS files, then use the master SASS file to pull them all together. Instead of having to dig through 700 lines of CSS, you can go to the partial file that deals only with the parts you want to change, update the style, recompile it, then publish the changes. You can have one file for your forms, another for your navbar, and so on. Instead of hundreds or thousands of lines of code in your CSS file, you could build a SASS master file that looks like this:

/* NOTE: 'sass' is a subdirectory I use within my source directory for my projects and is not required. That's just how my files are organized. */
@import 'sass/variables';
@import 'sass/navbar';
@import 'sass/forms';
@import 'sass/site';
1 Like