Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Useful Mixins used in CSS

Useful Mixins used in CSS

Published:

Reading Time: (approx) 3 min

Tags that this post has been filed under.

The main content about Useful Mixins used in CSS

These are the mixins that come with the Static Website Boilerplate which can be found in this article called Static Website Boilerplate, they are a work in progress and I will add to them when new mixins are necessary and also when time allows for more development. [1]

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;
  }
}

If you have enjoyed this article, please spread the word.


  1. This project is no longer under active development as I have switched my website building over to use Eleventy(11ty). ↩︎

Journal Index

Previous Article: Google Maps Not Loading Correctly

Next Article: Handlebars 'each' block helper and Json file