Sass Mixins

Free Sass Mixins For Your Next Project

If you know CSS Preprocessor languages such as Sass, then you definitely know the value of having a few mixins to help you develop and design your web pages faster without having to repeat the same code over and over again.

If you don’t know what Sass is or what CSS Preprocessor Languages are, you might want to check out my previous article (where I talk a little about mixins as well) to get a better understanding of what they are and how they can benefit you: Using Extensible CSS Preprocessor Languages: Sass or LESS.

What are mixins?

So you’re probably wondering to yourself what mixins exactly are…Mixins are little snippets of CSS Preprocessor “code” that you can use as part of your project to help you write CSS code much faster without having to repeat yourself over and over again. In short, it’s lines of CSS that you would normally write, say for example to add a gradient background to a div, by just calling it once instead of having to write a prefix for specific browsers each time. Let’s take a look at an example of how a mixin can help.

Let’s say you wanted to have a gradient background for a specific content div. When you’re writing normal CSS, you would write something like this:
[CSS]
.content {
background: #cccccc; /* fallback color for older browsers */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#aaaaaa));
background: -webkit-linear-gradient(top, #aaaaaa, #eeeeee);
background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
background: -ms-linear-gradient(top, #aaaaaa, #eeeeee);
background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
background: linear-gradient(top, #aaaaaa, #eeeeee);
}
[/CSS]

As you can see, you would have to write each of those lines separately each time you wanted to create a gradient background for other divs. In Sass (or other CSS Preprocessor languages), you can create a mixin that you can call once wherever you want it to be applied and it will create those lines for you.

Let’s take the above example and create our own Sass mixin that we can call.

[CSS]
@mixin gradient-vertical($startColor: #eeeeee, $endColor: #aaaaaa, $noGradient: #cccccc){
background: $noGradient; //fallback for older browsers
background: -moz-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // FF 3.6+
background: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)) repeat-x mix($startColor, $endColor, 60%); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Opera 11.10
background: linear-gradient(to bottom, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Standard, IE10
}
[/CSS]

As you can see from the code above, we have created a linear gradient mixin that will apply the default values of the hex color values #eeeeee, #aaaaaa, and #cccccc respectively.

Note that I’m using the mix() function as part of the background properties which mixes the $startcolor and $stopcolor values at 60% weight.

So here is how we will apply that mixin if we use it for our webpage:

[CSS]
.content {
@include gradient-vertical();
}
article {
@include gradient-vertical(#9bbe4d, #649419, #80a933);
}
[/CSS]

Notice that in the first example, I called the mixin using @include [mixin name](). You call mixins by using the @include statement followed by the mixin name and open/close parenthesis. This will output the default values you have set to that mixin (In this case the defaults are #eeeeee, #aaaaaa, #cccccc).

As you may have also noticed, in the second example, I have replaced the default color values with values that I want to be used instead. I applied a nice green gradient background using those 3 values instead of the default gray gradient.

And Here is the output:

[CSS]
.content {
background: #cccccc;
background: -moz-linear-gradient(top, #eeeeee, #aaaaaa) repeat-x #d2d2d2;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#aaaaaa)) repeat-x #d2d2d2;
background: -webkit-linear-gradient(top, #eeeeee, #aaaaaa) repeat-x #d2d2d2;
background: -o-linear-gradient(top, #eeeeee, #aaaaaa) repeat-x #d2d2d2;
background: linear-gradient(to bottom, #eeeeee, #aaaaaa) repeat-x #d2d2d2;
}

article {
background: #80a933;
background: -moz-linear-gradient(top, #9bbe4d, #649419) repeat-x #85ad38;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#9bbe4d), to(#649419)) repeat-x #85ad38;
background: -webkit-linear-gradient(top, #9bbe4d, #649419) repeat-x #85ad38;
background: -o-linear-gradient(top, #9bbe4d, #649419) repeat-x #85ad38;
background: linear-gradient(to bottom, #9bbe4d, #649419) repeat-x #85ad38;
}
[/CSS]

As you can see, mixins become very useful when you need to include code multiple times without having to retype it over and over again. Plus, the actual mixin itself does not get rendered in the output as it is only used when called upon.

Free Mixins For Everyone!

Now that we understand how mixins work, here’s a few mixins that I use to help me develop and design webpages quickly and efficiently:

[CSS]
@mixin letterpress($opacity){
text-shadow:0 1px 1px rgba(255,255,255,$opacity);
}
@mixin blackShadow($opacity){
text-shadow:0 1px 1px rgba(0,0,0,$opacity);
}
@mixin border-radius($borderRadius){
-webkit-border-radius: $borderRadius;
-moz-border-radius: $borderRadius;
border-radius: $borderRadius;
}
@mixin box-shadow($boxShadow){
-moz-box-shadow: $boxShadow;
-webkit-box-shadow: $boxShadow;
-ms-box-shadow: $boxShadow;
-o-box-shadow: $boxShadow;
box-shadow: $boxShadow;
}
@mixin box-shadow-2($boxShadow, $boxShadowInset){
-moz-box-shadow: $boxShadow, $boxShadowInset;
-webkit-box-shadow: $boxShadow, $boxShadowInset;
-ms-box-shadow: $boxShadow, $boxShadowInset;
-o-box-shadow: $boxShadow, $boxShadowInset;
box-shadow: $boxShadow, $boxShadowInset;
}

//border radius directions
@mixin border-top-radius($borderRadius){
-webkit-border-top-left-radius: $borderRadius;
-webkit-border-top-right-radius: $borderRadius;
-moz-border-radius-topleft: $borderRadius;
-moz-border-radius-topright: $borderRadius;
border-radius: $borderRadius $borderRadius 0 0;
}
@mixin border-bottom-radius($borderRadius){
-webkit-border-bottom-left-radius: $borderRadius;
-webkit-border-bottom-right-radius: $borderRadius;
-moz-border-radius-bottomleft: $borderRadius;
-moz-border-radius-bottomright: $borderRadius;
border-radius: 0 0 $borderRadius $borderRadius;
}
@mixin border-left-radius($borderRadius){
-webkit-border-top-left-radius: $borderRadius;
-webkit-border-bottom-left-radius: $borderRadius;
-moz-border-radius-topleft: $borderRadius;
-moz-border-radius-bottomleft: $borderRadius;
border-radius: $borderRadius 0 0 $borderRadius;
}
@mixin border-right-radius($borderRadius){
-webkit-border-top-right-radius: $borderRadius;
-webkit-border-bottom-right-radius: $borderRadius;
-moz-border-radius-topright: $borderRadius;
-moz-border-radius-bottomright: $borderRadius;
border-radius: 0 $borderRadius $borderRadius 0;
}

//for use of custom transitions
@mixin transition($transition) {
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
@mixin box-shadow-transition($duration){
-webkit-transition: box-shadow #{$duration}s ease;
-moz-transition: box-shadow #{$duration}s ease;
-o-transition: box-shadow #{$duration}s ease;
transition: box-shadow #{$duration}s ease;
}

//transformations
@mixin box-rotate($deg){
-webkit-transform: rotate(#{$deg}deg);
-moz-transform: rotate(#{$deg}deg);
-ms-transform: rotate(#{$deg}deg);
-o-transform: rotate(#{$deg}deg);
transform: rotate(#{$deg}deg);
}
@mixin scale($ratio) {
-webkit-transform: scale($ratio);
-moz-transform: scale($ratio);
-ms-transform: scale($ratio);
-o-transform: scale($ratio);
transform: scale($ratio);
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-moz-transform: translate($x, $y);
-ms-transform: translate($x, $y);
-o-transform: translate($x, $y);
transform: translate($x, $y);
}
@mixin skew($x, $y) {
-webkit-transform: skew($x, $y);
-moz-transform: skew($x, $y);
-ms-transform: skew($x, $y);
-o-transform: skew($x, $y);
transform: skew($x, $y);
}
@mixin translate3d($x, $y, $z) {
-webkit-transform: translate3d($x, $y, $z);
-moz-transform: translate3d($x, $y, $z);
-o-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
}

//Add opacity to elements
@mixin opacity($opacity){
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity}*10)”;
filter: alpha(opacity=#{$opacity}*100);
-moz-opacity: $opacity;
-khtml-opacity: $opacity;
opacity: $opacity;
}

// Add an alphatransparency value to any background or border color
@mixin translucent-background($color: #fff, $alpha: 0.5) {
background: $color; //fallback
background: hsla(hue($color), saturation($color), lightness($color), $alpha);
}
@mixin translucent-border($size: 1px, $style: solid, $color: #fff, $alpha: 0.5) {
border: $size $style hsla(hue($color), saturation($color), lightness($color), $alpha);
background-clip: padding-box;
}

//gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333, $noGradient: #444){
background: $noGradient;
background: -moz-linear-gradient(left, $startColor, $endColor) repeat-x $endColor; // FF 3.6+
background: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor) repeat-x $endColor); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(left, $startColor, $endColor) repeat-x $endColor; // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(left, $startColor, $endColor) repeat-x $endColor repeat-x $endColor; // Opera 11.10
background: linear-gradient(to right, $startColor, $endColor) repeat-x $endColor; // Standard, IE10
}
@mixin gradient-vertical($startColor: #eee, $endColor: #aaa, $noGradient: #ccc){
background: $noGradient;
background: -moz-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // FF 3.6+
background: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)) repeat-x mix($startColor, $endColor, 60%); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Opera 11.10
background: linear-gradient(to bottom, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Standard, IE10
}
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45, $noGradient: #444){
background: $noGradient;
background: -moz-linear-gradient(#{$deg}deg, $startColor, $endColor) repeat-x $endColor; // FF 3.6+
background: -webkit-linear-gradient(#{$deg}deg, $startColor, $endColor) repeat-x $endColor; // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(#{$deg}deg, $startColor, $endColor) repeat-x $endColor; // Opera 11.10
background: linear-gradient(#{$deg}deg, $startColor, $endColor) repeat-x $endColor; // Standard, IE10
}
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f, $noGradient: #444){
background: $noGradient;
background: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor)) no-repeat mix($midColor, $endColor, 80%);
background: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor) no-repeat mix($midColor, $endColor, 80%);
background: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor) no-repeat mix($midColor, $endColor, 80%);
background: -o-linear-gradient($startColor, $midColor $colorStop, $endColor) no-repeat mix($midColor, $endColor, 80%);
background: linear-gradient($startColor, $midColor $colorStop, $endColor) no-repeat mix($midColor, $endColor, 80%);
}
@mixin gradient-vertical-button($highlightColor: #fbeda1, $topColor: #FFBB02, $bottomColor: #EB6900, $shadowColor: #b07504){
background: $bottomColor;
background: -moz-linear-gradient(top, $highlightColor 0%, $topColor 4%, $bottomColor 95%, $shadowColor 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$highlightColor), color-stop(4%,$topColor), color-stop(95%,$bottomColor), color-stop(100%,$shadowColor));
background: -webkit-linear-gradient(top, $highlightColor 0%,$topColor 4%,$bottomColor 95%,$shadowColor 100%);
background: -o-linear-gradient(top, $highlightColor 0%,$topColor 4%,$bottomColor 95%,$shadowColor 100%);
background: -ms-linear-gradient(top, $highlightColor 0%,$topColor 4%,$bottomColor 95%,$shadowColor 100%);
background: linear-gradient(to bottom, $highlightColor 0%,$topColor 4%,$bottomColor 95%,$shadowColor 100%);
}
@mixin gradient-radial($innerColor: #555, $outerColor: #333,$noGradient: #444){
background: $noGradient;
background: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor)) no-repeat $outerColor;
background: -webkit-radial-gradient(circle, $innerColor, $outerColor) no-repeat $outerColor;
background: -moz-radial-gradient(circle, $innerColor, $outerColor) no-repeat $outerColor;
background: -o-radial-gradient(circle, $innerColor, $outerColor) no-repeat $outerColor;
}

// triangles ($direction can be: up, down, left, right, up-right, up-left, down-righ or down-left)
@mixin triangle($size, $color, $direction) {
height: 0;
width: 0;

@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
border-color: transparent;
border-style: solid;
border-width: $size / 2;

@if $direction == up {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == down {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
}
}

@else if ($direction == up-right) or ($direction == up-left) {
border-top: $size solid $color;

@if $direction == up-right {
border-left: $size solid transparent;
} @else if $direction == up-left {
border-right: $size solid transparent;
}
}

@else if ($direction == down-right) or ($direction == down-left) {
border-bottom: $size solid $color;

@if $direction == down-right {
border-left: $size solid transparent;
} @else if $direction == down-left {
border-right: $size solid transparent;
}
}
}

//hide text for use with background images
@mixin hide-text{
overflow:hidden;
text-indent:-9999px;
display:block;
}

//for custom @font-face
@mixin family($family: ”, $url: ‘/fonts/’, $weight: normal, $style: normal) {
@font-face {
font-family: $family;
src: url(‘#{$url}.eot’);
src: url(‘#{$url}.eot?#iefix’) format(’embedded-opentype’),
url(‘#{$url}.woff’) format(‘woff’),
url(‘#{$url}.ttf’) format(‘truetype’),
url(‘#{$url}.svg#svg’) format(‘svg’);
font-weight: $weight;
font-style: $style;
}
}

// Clearfix for clearing floats like a boss (from h5bp.com/q)
@mixin clearfix() {
zoom: 1;
&:before,
&:after {
display: table;
content: “”;
zoom: 1;
}
&:after {
clear: both;
}
}

// browser specific————————-
@mixin ie7-inline-block() {
vertical-align: baseline; // for all other browsers
*vertical-align: auto; // set for consistency in IE7
*display: inline; // IE7 inline-block hack
*zoom: 1; //enables hasLayout
}

// IE7 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we’re attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
@mixin ie7-restore-left-whitespace() {
*margin-left: .3em;

&:first-child {
*margin-left: 0;
}
}

@mixin ie7-restore-right-whitespace() {
*margin-right: .3em;

&:last-child {
*margin-left: 0;
}
}

[/CSS]

Conclusion

I hope that this tutorial helped you understand mixins better and that these free mixins will help you on your next Sass project. If you have other mixins that you think might be helpful, let me know in the comments and I’ll include them to the list.

Also, please don’t forget to sign up to the mailing list to get a monthly newsletter of tutorials just like this.

 

 

Other Articles you might like:

Leave a Reply

Your email address will not be published. Required fields are marked *