Usefull Sass mixins found on the web (SCSS style)

mixins.scss

//=======================================================
// Useful SASS Mixins
// src: http://sachagreif.com/useful-sass-mixins/
//=======================================================

//-------------------------------------------------------
// Horizontal Navigation Lists
//-------------------------------------------------------
@mixin navigation-list {
    list-style-type:none;
    padding:0;
    margin:0;
    overflow:hidden;
    > li{
        display:block;
        float:left;
        &:last-child{
            margin-right:0px;
        }
    }
}

//=======================================================
// 8 Sass mixins you must have in your toolbox
// src: http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
//=======================================================

//-------------------------------------------------------
// Cross browser opacity
//-------------------------------------------------------
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

// Usage
.faded-text {
	@include opacity(0.8);
}

//-------------------------------------------------------
// Clearfix
//-------------------------------------------------------
%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container-with-floated-children {
	@extend %clearfix;
}

//=======================================================
// 15 essential Sass mixins
// src: http://www.developerdrive.com/2014/11/15-essential-sass-mixins/
//=======================================================

//-------------------------------------------------------
// box-sizing
//-------------------------------------------------------
@mixin box-sizing($type)
 {
 -webkit-box-sizing:$type;
 -moz-box-sizing:$type;
 box-sizing:$type;
 }

// Usage:
div {
	@include box-sizing(border-box);
}

//-------------------------------------------------------
// box-shadow
//-------------------------------------------------------
@mixin box-shadow( $h: 10px , $v: 10px , $b: 0px , $s: 0px , $c: #000000 ) {
     -webkit-box-shadow: $h $v $b $s $c;
 	-moz-box-shadow: $h $v $b $s $c;
 	box-shadow: $h $v $b $s $c;
 }

// Usage:
div {
	@include box-shadow(8px, 8px);
}


//-------------------------------------------------------
// font-size
//-------------------------------------------------------
// Mixins are great for progressive enhancement. This mixin sets the font-size in pixels, then overwrites that by setting it in rems. rems will only be used if the browser in question supports them:

@mixin font-size($size) {
    font-size:$size;
 	font-size: ($size / 16px) * 1rem;
}

// Usage:
div {
	@include font-size(14px);
}

//=======================================================
// Building a grid using Sass mixins
// src: http://steverydz.com/2014/03/09/building-a-grid-using-sass-mixins/
//=======================================================

//-------------------------------------------------------
// Configuration
//-------------------------------------------------------
$container-width: 96% !default; // Sets the overall width
$container-max-width: 1200px !default; // Sets the max-width
$grid-base-outer-width: 940 !default; // Context
$grid-base-col-width: 60 !default; // Based on context
$grid-base-gutter-width: 20 !default; // Based on context
$grid-cols: 12 !default; // Number of columns

//-------------------------------------------------------
// The basics
//-------------------------------------------------------
@mixin clearfix {

  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

@mixin container {
  @include clearfix;
  width: $container-width;
  max-width: $container-max-width;
  margin: 0 auto;
}

@mixin row {
  @include clearfix;
}

//-------------------------------------------------------
// Making the columns
//-------------------------------------------------------
$grid-col-width: percentage($grid-base-col-width / $grid-base-outer-width);
$grid-gutter-width: percentage($grid-base-gutter-width / $grid-base-outer-width);

@mixin span-columns($cols) {
  float: left;
  width: ($grid-col-width + $grid-gutter-width) * $cols - $grid-gutter-width;
  margin-right: $grid-gutter-width;

  &:last-child {
    margin-right: 0;
  }
}

//-------------------------------------------------------
// Allowing for more rows
//-------------------------------------------------------
// This all works fine but it means every time I want a new row of columns I’ll need to create a new row container. In some cases this is fine, but if I’m working with a grid of thumbnails this isn’t very useful, so I created an omega mixin to clear the end of each row:

@mixin omega($nth) {

  &:nth-child(#{$nth}) {
    margin-right: 0;
  }
}


// The drawback to this is that I may need to reset the omega element at a different breakpoint. For that I created another mixin:

@mixin omega-reset($nth) {

  &:nth-child(#{nth}) {
    margin-right: $grid-gutter-width;
  }
}

//-------------------------------------------------------
// Allowing for more rows
//-------------------------------------------------------
.page-container {
	@include container;
}

.thumbnails {
	@include row;
}

.thumbnail {
	@include span-columns(6);
	@include omega(2n);

	@media only screen and (min-width: 600px) {
	  @include span-columns(4);
	  @include omega-reset(2n);
	  @include omega(3n);
	}
}


//=======================================================
// Helpful Sass Mixins
// src: http://seesparkbox.com/foundry/helpful_sass_mixins
//=======================================================

//-------------------------------------------------------
// Border Radius
//-------------------------------------------------------
@mixin border-radius ( $value: 3px ) {
  -webkit-border-radius: $value;
  -moz-border-radius: $value;
  border-radius: $value;
 
  // keeps background from busting out of border 
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}