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
$light-blue or whatever else you want by changing just one value.
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.