
“Getting Sassy with Sass” is a fun, easy to follow guide on the benefits of the Sass extension/ preprocessor for CSS. Sass adds a bit of logic and cleaned-up syntax to reduce repetition and improve code organization! Sass code gets transformed automagically into CSS at runtime, and the syntax is pretty easy to follow. I’m going to opt to use .scss instead of .sass syntax, since .scss also allows CSS itself within the code base, it’s also a bit more contained. The other, .sass, looks sort of like HAML code and you need to rely on indentations (not my favorite)
Once you have it installed on your computer, Sass is “run” (compiled) with the command: sass source.scss output.css so it’s pretty easy. The output css file will be used by your page as usual. There are many fun parts to Sass instead of CSS. First being modules, you can import part or all of another Sass file, which helps with modular design of your page architecture. Since you can take just part of a Sass file into your app, you can download all of bootstrap as a .sass file, only “@import” the part that you need, this way you don’t need to take the entire bootstrap library to do something, if you only want the grid or buttons.
You are able to use variables and math/functions with Sass as well. This allows your code to be more manageable and easier to make changes across many pages with just a few keystrokes. If all your headers, links, and footers are a blueish-green and you want to make them a pure blue, you can easily change the variable value instead of searching through code for each instance.
Due to the many features/functionalities of Sass, it is easy to get mixed up and overwhelmed while working with it. Not all projects will require all or most features Sass offers, for example the tutorial mentions most times you can use mixins or inheritance, but maybe not needed for both. This is a super powerful tool but you need to use it wisely and not make spaghetti chaos. Some applications of Sass are skins/night mode, responsive sizing, and themes.
Overall this tutorial was fun, well designed, and mostly easy to follow. If you haven’t tried out Sass before this is a good starting point.
Next I am going to attempt the “clone this template” project next for fun. 100% going to use Sass, and webpack/babel!
