When you’re dealing with browsers and markup, content tends to float to the top of the window by default. In most cases there is enough content on the page to keep the footer at the bottom of the window but, if a page doesn’t occupy the full height of the window, the footer is going to float right up to the bottom of the content creating an unattractive empty space below.

Disclaimer, I got this to work but these are notes from my first attempt so some of this may be overkill. A lot of the information I found was over a year old so I’m probably using some work-arounds that are no longer necessary. I’ll be back to make corrections as needed. If you notice anything wrong please let me know in the comments. For the most official info check out Working with CSS Preprocessors on the Google developer pages.