Mixins are one of the most useful and compelling reasons to use a CSS preprocessor. The typical way they are presented is for helping with CSS3 vendor prefix stuff. Indeed that is a compelling use case. No more tedious writing of all the prefixes and even more tedious updating of them over time.
However, if you are using Sass, you can use Compass, and Compass already has all those CSS3 mixins ready to go for you. Want to use the new CSS filters but want to be all future proof about it? No problem:
img {
@include filter(grayscale(100%));
&:hover {
@include filter(grayscale(0));
}
}
And you’re good to go.
But handcrafted @mixins can be useful too! That is, @mixins that you author yourself to benefit your specific project. I enjoyed a post by Sacha Greif where he outlaid some @mixins he uses sometimes for specific projects.
For instance, he has some for the embossing & letterpress effects found on some sites.
@mixin box-emboss($outerOpacity, $innerOpacity) {
box-shadow:
rgba(white, $outerOpacity) 0 1px 0,
rgba(black, $innerOpacity) 0 1px 0 inset;
}
And then you could call that on any selector you wish to have that effect.
.module, header[role="banner"] {
@include box-emboss(0.3, 0.6);
}
If you wanted to get super clever with this, you could also make a placeholder selector in which to @extend. That way you aren’t repeating any code in the compiled CSS but you can separate your selectors and organize them however you want.
%box-emboss {
@include box-emboss(0.3, 0.6);
}
header[role="banner"] {
@extend %box-emboss;
}
...
.module {
@extend %box-emboss;
}
Here’s an example of that on CodePen:
I thought I’d share other custom @mixins I’ve used on some of my own projects.
Font Stacks
On this site I have four font stacks:
- Brand
- Headers
- Body
- Code
If you’re properly careful with fonts, you probably aren’t setting font-family
too many different times in your stylesheet. If you’re setting the same stack a dozen times, there is something wrong going on. But, you might have to more than once. For instance, you might have a default body font set literally on the <body>
, but that won’t cascade into form elements, so if you want to use the same font there you’ll need to set that again on those elements. Now that you’re setting it in two places, a @mixin is already useful.
I like using @mixins for this rather than a string variable set to the font families themselves, because the @mixin allows you to set other properties too if you wish. For instance, you might be using an @font-face
font where you’re only loading one particular weight and thus you want to set that weight whenever you set that font-family
.
Here’s the @mixins at the moment for this site:
@mixin font-stack-brand {
font-family: 'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
}
@mixin font-stack-headers {
font-family: 'Whitney Cond A', 'Whitney Cond B', "ronnia-condensed", sans-serif;
font-weight: 700;
font-style: normal;
}
@mixin font-stack-body {
font-family: 'Whitney SSm A', 'Whitney SSm B', "ff-meta-web-pro", sans-serif;
}
@mixin font-stack-code {
font-family: Menlo, "inconsolata", Monaco, "Courier New", Courier, monospace;
}
Media Query Mixin
You can create mixins that output the content that you pass after it in curly braces. This allows for a couple of neat possibilites. For instance, you can “name” a media query and then use it wherever you want. Meaning updating that media query only has to happen in one place. For instance:
@mixin breakpoint($point) {
@if $point == mama-bear {
@media (max-width: 1250px) { @content; }
}
@if $point == baby-bear {
@media (max-width: 800px) { @content; }
}
@if $point == reverso-baby-bear {
@media (min-width: 800px) { @content; }
}
@if $point == reverso-mama-bear {
@media (min-width: 1250px) { @content; }
}
}
And a simple usage example:
.page-wrap {
width: 80%;
@include breakpoint(baby-bear) {
width: 100%;
}
}
.footer {
a {
display: inline-block;
@include breakpoint(baby-bear) {
display: block;
}
}
}
You can learn more about this idea here.
Animation Mixin
Compass doesn’t have a @mixin for keyframe animations yet, but this is very easy to add on your own. It uses the same @content idea that the media query mixin uses above.
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content
}
@-moz-keyframes #{$name} {
@content
}
@-ms-keyframes #{$name} {
@content
}
@-o-keyframes #{$name} {
@content
}
@keyframes #{$name} {
@content
}
}
And one to set the animation…
@mixin animation($value) {
-webkit-animation: $value;
-moz-animation: $value;
-ms-animation: $value;
-o-animation: $value;
animation: $value;
}
Using it then becomes easy:
@include keyframes(move) {
0% { left: 0; }
100% { left: 100px; }
}
.box {
@include animation(move 0.5s ease infinite alternate);
}
You can learn more about CSS animation here.
Toolbox Mixins
There are some simple helper classes that I’ve used on countless projects over the years. Things like an accessible hiding class and typography helping classes. If you make a mixin for these things, you can get double the bang for your buck.
// Accessible hiding
@mixin screen-reader-text() {
position: absolute;
top: -9999px;
left: -9999px;
}
.screen-reader-text {
@include screen-reader-text;
}
// Overflow Ellipsis
@mixin ellipsis() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis {
@include ellipsis;
}
// Word Wrapping
@mixin word-wrap() {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.word-wrap {
@include mixin word-wrap;
}
Now you have a class name you can use in markup if you need to apply these properties. But you also have a mixin you can use to apply these properties to other declarations if you can’t or don’t want to touch the markup.
Note that I generally don’t advise having your mixins and classes right next to each other like this. I prefer mixins to be in a separate file like _bits.scss which compiles to nothing and thus can be included on any other Sass file.
Yours?
It’s always fun to share.
I’ve started a series of post on my blog with some mixins not included in Compass that I’ve found helpful.
One for CSS triangles is probably my favorite: blackbe.lt/useful-sass-mixins-css-trangle/
While triangles are not built into Compass, they are built into Zurb Foundation’s Compass extension. While not a huge fan of Foundation for large sites (it gets cumbersome), I do use it frequently for small sites that are one or two pages and the triangle mixin very helpful.
I love using SASS to style website, I could never imagine going back to straight CSS! I use mixins for media queries, font stacks, and backgrounds the most. My recent one is when I need to clear any parent styling to a div, which comes up a lot when working with drupal. So what I like to use is this:
I’ve only been using Sass for a week, and loving it! Put together me a little gradient mixin in which I can specify on which property I want it used:
I’m growing a collection of utilities, some largely based on Bourbon, in a styleguide I’m slowly building and cleaning up.
Excellent, I was going to post these on my site – http://www.alwaystwisted.com and I still might… A pair of custom mixins for vertical rhythm – w/ REMs/PX – http://jsfiddle.net/sturobson/vYYn5/ w/ Ems – http://jsfiddle.net/sturobson/3KfUL/
Oh, and there’s the lt-IE mixin I had help in creating that I’ve talked about here – http://alwaystwisted.com/post.php?s=2012-08-06-a-sass-mixin-for-media-queries-and-ie
Media query + Retina Mixin (Mucho, thanks to chris’ tweet yesterday.)
SCSS Media Queries with HiDpi (Retina) Support – Gist
I’m using these mixins too, but I didn’t build it myself. I use a gem which extends SASS called Bourbon (for styling) and Neat (for positioning) and they have those awesome features. I really recommend using those gem’s, because they’re all prefixed so everything you want (like those examples), is inside those gems! And because they’re awesome :)
Cooked up a mixin for creating directional arrows (triangles) on boxes that have borders. Nothing revolutionary CSS-wise but nice to put in a mixin. Still a newbie so any feedback is welcome.
Bordered Box Arrow (Gist) »
This is great Fitz! Thanks for sharing.
I’m using straight CSS and love it, and I could never imagine to seriously load such a lot of abstract bloat to my projects.
Plain CSS all the way!
1) SCSS compiles to plain CSS
2) The abstraction is the opposite of bloat: it allows you to keep your code modular and so reduces repetition
After gathering lots of CSS tricks, I’ve decided to published all this mixins (using Sass & Compass) under this project: Compass Recipes. This is still WIP, but there is lots of interesting stuffs.
Hope you enjoy it.
And I’ve just created a Sass/SCSS mixin of that retina/non-retina media queries you created a gist with yesterday –
http://codepen.io/sturobson/pen/plcks
Write gradient in new syntax and get older.
Because the mixin should make new code compatible to old code.
Ah, Heck the linear-gradient mxin was double posted chris can you please remove that.
I can’t understand one thing a have seen compass using
I’ve found these SASS/SCSS mixins really useful when you don’t have access/can’t get Compass installed:
https://github.com/matthieua/sass-css3-mixins
Lots of CSS3 goodness in there.
I’m still in transition to SASS, but these are some LESS mixins I’m currently using in a project. The best use I’ve found for mixins is the ability to set your fallbacks for IE and older browsers, as well as pass in your values for browser prefixes.
I’ve always used an inset for creating double borders, rather than a nested span or div, so mixins were the perfect vehicle:
Might be useful (@see http://snipplr.com/view.php?codeview&id=66966):
Why are you using the the
-ms-
prefixes for the animations?Since no stable version of IE ever shipped with these prefixes, it is generally understood that there’s no need to include them.
While
compass
is still churning them out (hopefully that’ll change soon), we shouldn’t be using them in our own mixins.I extented a mixin for dealing with rem. I wrote it down in german:
http://typo3-wuppertal.de/post/33835337756/sass-plugin-fur-die-nutzung-von-rem
Here is an example of usage:
This becomes to:
If you just want the code, you might look here:
https://github.com/SimonWpt/rem
I posted this in the Lodge yesterday, but I’m going to post it here as well.
Here’s a
@mixin
for font-stacks that has an!important
option. This is super handy for those stubborn inserted divs, I’m looking at you Google Custom Search Engine.