To implement this mixin you'll need the following a full-page wrapper element, with the footer inside of it. That's it.
The footer is the wrapper's child, like so:
<body> <div class="wrapper"> <!-- your page's content --> <footer class="scut-sticky"> <!-- your footer's content --> </footer> </div> </body>
Then your footer should stick to the bottom of the page, regardless of the height of the content above it or its own height. (If you have a fixed-height footer, you could try
This mixin should not be invoked within a declaration block — i.e. don't nest it. The mixin needs to add rules for a number of elements —
body, the wrapper, and the footer — so it can't be restricted to the context of a different selector.
Since an example of this utility requires its own
<body> elements, this example is relegated to Codepen.