sass Archives - Matt Vanderpol

Scut is a wonderful library to make Sass even better. There are a few mixins that I find particularly helpful and use quite frequently.

General

Hide an element visually – scut-hide-visually

Create a triangle with the border trick – scut-triangle

Layout

The ubiquitous clearfix – scut-clearfix

Easy margin where you want them – scut-margin

Just pad what you want – scut-padding

Absolutely minimal cruft – scut-absolute

Typography

@font-face with all the “fixins” – scut-font-face

Usage

I almost always use the @include form rather than the @extend form so that I can easily use the styles in media queries.

Form placeholders have a very specific syntax to style and it varies from browser to browser. This is compounded by the fact that you must specify each selector in its own group because browsers will invalidate a selector group if it doesn’t understand one of the selectors.

Taken together, in order to specify styles for placeholders, you need to duplicate your styling in 4 different blocks. You can get around this by using a mixin for the styles (you can’t use an @extend because that would merge the placeholder selectors into a single group) but you’re still having to repeat the placeholder selectors.

The Mixin

This mixin makes it easy to have a single line in your Sass for placeholder styling which is then output as multiple selector groups.

@mixin placeholders() { ::-webkit-input-placeholder { @content; } ::-moz-placeholder { @content; } :-ms-input-placeholder { @content; } input:-moz-placeholder { @content; } }

Example Usage

Very easy to call and use.

Matt Vanderpol

Web Solutions for Business Problems

Recent Posts

Tagsass

My Favorite Scut Helpers