Oh yes you should jump at Sass right away. It'll greatly improve your process. Let me sell it to you. If you had a color guide to build a website with a set of 3 colors like
#C3DBBD . Would you rather try to go back to your styleguide to copy those color codes each time you need them or instead just define them as variables?
Okay here's a bigger use case. You've learned that when text shouldn't go beyond a line you need to display ellipsis and set a title attribute.
You decide to always set this when you need an ellipsis:
What if you made that a mixin you could inject into any rule instead?
/* Occupy just 320px of space and add an ellipsis */
/* Occupy the width and add an ellipsis */
The big different between this and just creating a class
.ellipsis-line is how you can just inject the width to vary on different rules. Imagine the possibilities and how much more you can do with this. One of my awesome mixins is one I use to create hero sections with colored overlay. It's applied this way:
@include tinted-bg($color-brand-1, .95, "header-background.jpg", cover);
You can simply use that for overlays like this one on Codenewbie Homepage
Finally, there are color functions like
mix. You may look into how they're used here.