Useful Mixins used in CSS
by Will Moody
Approximate Reading Time: 2 minutes
These are the mixins that come with the Static Website Boilerplate found here, they are a work in progress as I add to them when necessary.
mixins.scss
// Clear after floats
@mixin clearfix {
zoom: 1;
&:before,
&:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
// Apply clearfix to this classes by default
.clearfix,
.group {
@include clearfix;
}
// Responsive mixins
@mixin responsive($res) {
@media screen and (min-width: $res) {
@content;
}
}
@mixin mobilefirst($res) {
@media screen and (min-width: $res) {
@content;
}
}
// Slightly lighten a color
@function tint($color, $percentage) {
@return mix(white, $color, $percentage);
}
// Slightly darken a color
@function shade($color, $percentage) {
@return mix(black, $color, $percentage);
}
// Responsive ratio
@mixin responsive-ratio($x,$y, $pseudo: false) {
$padding: unquote( ( $y / $x ) * 100 + '%' );
@if $pseudo {
&:before {
@include pseudo($pos: relative);
width: 100%;
padding-top: $padding;
}
} @else {
padding-top: $padding;
}
}
// CSS triangles
@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
@include pseudo($pos: $position);
width: 0;
height: 0;
@if $round {
border-radius: 3px;
}
@if $direction == down {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
margin-top: 0 - round( $size / 2.5 );
} @else if $direction == up {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
margin-bottom: 0 - round( $size / 2.5 );
} @else if $direction == right {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
margin-right: -$size;
} @else if $direction == left {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $color;
margin-left: -$size;
}
}
//Placeholders
@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
// Gradient
@mixin background-gradient($start-color, $end-color, $orientation) {
background: $start-color;
@if $orientation == 'vertical' {
background: -webkit-linear-gradient(top, $start-color, $end-color);
background: linear-gradient(to bottom, $start-color, $end-color);
} @else if $orientation == 'horizontal' {
background: -webkit-linear-gradient(left, $start-color, $end-color);
background: linear-gradient(to right, $start-color, $end-color);
} @else {
background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
background: radial-gradient(ellipse at center, $start-color, $end-color);
}
}
//Usage:
//$start-color, $end-color, $orientation - vertical/horizontal/radial
.foo {
@include background-gradient(red, black, 'vertical');
}
//Animation mixin setup
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-ms-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
//Usage
// Define animation name, and properties
@include keyframes(fade-out) {
0% { opacity: 1; }
90% { opacity: 0; }
}
// Add animation to element
.element {
width: 100px;
height: 100px;
background: black;
@include animation('fade-out 5s 3');
}
// Retina Images
@mixin image-2x($image, $width, $height) {
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
background-image: url($image);
background-size: $width $height;
}
}
//Usage
div.logo {
background: url("logo.png") no-repeat;
@include image-2x("logo2x.png", 100px, 25px);
}
// Cross Browser Opacity
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
// Box Shadow
@mixin boxshadow($horiz, $vert, $blur, $color) {
box-shadow: $horiz $vert $blur $color;
}
// Inner Shadow
@mixin innershadow($horiz, $vert, $blur, $color) {
box-shadow: inset $horiz $vert $blur $color;
}
// Drop Shadow
@mixin drop-shadow($color: fade-out(#000, 0.6), $size: 3px, $vertical-offset: 0px, $horizontal-offset: 0px) {
box-shadow: $horizontal-offset $vertical-offset $size $color;
-webkit-box-shadow: $horizontal-offset $vertical-offset $size $color;
-moz-box-shadow: $horizontal-offset $vertical-offset $size $color;
}
@mixin drop-shadow-inset($color: fade-out(#000, 0.6), $size: 3px, $vertical-offset: 0px, $horizontal-offset: 0px) {
box-shadow: inset $horizontal-offset $vertical-offset $size $color;
-webkit-box-shadow: inset $horizontal-offset $vertical-offset $size $color;
-moz-box-shadow: inset $horizontal-offset $vertical-offset $size $color;
}
@mixin drop-shadow-no() {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
/// Allows you to pass it arguments to easily output a
/// light or dark color of your choosing based on the
/// lightness of another color.
///
/// @param {Color} $background-color
/// @param {Color} $light-color [config-get('contrasting-color-light')]
/// @param {Color} $dark-color [config-get('contrasting-color-dark')]
///
/// @return {Color}
@function contrasting-color($background-color, $light-color: config-get("contrasting-color-light"), $dark-color: config-get("contrasting-color-dark")) {
@if is-light($background-color) {
@return $dark-color;
} @else {
@return $light-color;
}
}