Assorted SASS Mixins
‹ BackApp height
@include app-height;
@include app-height("min");
@include app-height("max");
A drop-in replacement for 100vh
for cases where vh units aren't exactly representative of the visual viewport.
Without any arguments, it resolves to the equivelent of height: 100vh
You can switch to min-height or max-height by passing in either min or max as the first and only argument.
Note: This requires support for css custom properties (native variables), in places where this is not supported, 100vh will be used instead.
Background cover
@include background-cover;
A mixin that sets the background size to cover and background-position to center.
Colour and decorate link
@include color-link(default, hover);
@include decorate-link(default, hover);
These two mixins are very similar and are used for quickly styling links.
For example, say you want a blue underline link that should go purple and no underline on hover:
@include color-link(blue, purple);
@include decorate-link(underline, none);
Disable mouse outline
@include disable-mouse-outline;
This will disable the outline
on focusable elements when the user's primary interaction is the mouse, retaining the outline on other input types.
Flush children
@include flush-children;
This will remove the top margin from the first-child and bottom margin from the last-child.
The equivelent of writing:
margin-top: 20px; margin-bottom: 20px; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; }
Instead you can write:
margin-top: 20px; margin-bottom: 20px; @include flush-children;
Input placeholder
@include input-placeholder { color: purple };
A mixin for styling input placeholders cross browser.
Overflow scroll
@include overflow-scroll;
@include overflow-scroll-x;
A way to set overflow: scroll and webkit touch scrolling at once.
Ratio
padding-top: ratio(5,10);
Ratio is a function that will return the ratio percentage between a width and a height.
This is useful for ratio-aware sizing.
@include ratio-size(5,10,>div);
Ratio-size takes ratio-aware sizing a step further by scaffolding up the styles used in creating a container that is sized by a ratio, then positioning an element absolutely inside that container.