So, this is the first time I’ve tried using a CSS preprocessor, in this case Sass. Compared to good ol’ plain CSS, it takes some getting used to, but one thing I immediately liked was defining some base variables for font-family and colors. I created a site using just HTML and CSS for a previous course and my basic idea was copying the overall feel of that site and modifying the minima template accordingly. I have to say it was much quicker than I thought once I figured out how everything works… I first started out modifying the partials in the _sass directory, but then I realized it was smarter to follow the instructions in the minima template readme and just add my custom scss to the main.scss file to override the default CSS. This keeps everything in one place and makes sure that I can easily keep my preferred site design while still being able to use future versions of minima.

You can download my modified main.scss here.I started out changing the $brand-color to my color of choice. I also changed the $background-color and $text-color. The fonts needed some change too, so I changed the $base-font-family and added a $heading-font-family to separate the style of headings from other text. I then applied the relevant styling variables to headings. I wanted a sort of “tab”-feel for the navigation, and that’s where Sass came in handy. In order to get the exactly correct amount of padding on the .page-linkaelements, I could use number operations together with the variables for $spacing-unitand $base-font-size. This also ensures that the padding stays correct if e.g. the header height is changed.

tl;dr

To keep this post short, I won’t comment on everything I did, but my conclusion from this little experiment is that variables and mathematical operators are super nice to have and really add value. Nesting is alright but sometimes more difficult to read than regular CSS. I didn’t work directly with the other Sass goodies (partials, mixins, inheritance), but the minima template puts everything to good use and editing specific parts of the template was a breeze thanks to Sass.