Useful scss mixins (rounded corners, gradients, text-field, button)

_mixins.scss

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

@mixin text-field {
 display: inline-block;
  outline: none;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  @include rounded();
  @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2));
}

@mixin button($color: $red, $text_color: $white) {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  @include rounded();
  @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2));

  color: $text_color !important;
  font-weight: bold;
  border: solid 1px darken($color, 18%);
  background: $color;
  @include gradient(saturate($color, 15%), darken($color, 15%));

  &:hover {
    text-decoration: none;
    background: saturate($color, 10%);
    @include gradient(saturate($color, 5%), darken($color, 5%));
  }

  &:active {
    position: relative;
    top: 1px;
    color: saturate($color, 15%);
    @include gradient(saturate($color, 15%), lighten($color, 15%));
  }
}

@mixin rounded($radius: 0.5em) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin gradient($from, $to) {
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -moz-linear-gradient(top,  $from, $to);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}

Hey, this mixin is great
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
@if $inset {
-webkit-box-shadow:inset $top $left $blur $color;
-moz-box-shadow:inset $top $left $blur $color;
box-shadow:inset $top $left $blur $color;
} @else {
-webkit-box-shadow: $top $left $blur $color;
-moz-box-shadow: $top $left $blur $color;
box-shadow: $top $left $blur $color;
}
}

but if you want to use spread-radius as well then use this,

@mixin box-shadow($offset-x, $offset-y, $blur-radius, $spread-radius, $color, $inset: false) {
@if $inset {
-webkit-box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
-moz-box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
}
@else {
-webkit-box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
-moz-box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
}
}

use this mixin as,
@include box-shadow(0, 0, 0, 4px, #000, inset);

Your box-shadow mixin doesn't allow for double box-shadows.
I'd do something like this instead:

@mixin box-shadow($shadow1, $shadow2:false) {
 $params: $shadow1;
  @if $shadow2 
    { $params: $shadow1, $shadow2; }
  -webkit-box-shadow: $params;
     -moz-box-shadow: $params;
          box-shadow: $params;
}

And then you could do

@include box-shadow(
    0 1px 4px rgba(0,0,0,0.3),
    0 0 40px rgba(0,0,0,0.1) inset
 );

And of course you could extend it for more box shadows :P

Wouldn't it be better to just use an argList? That way you don't need to use conditional statements.

@mixin box-shadow($shadows...) {
box-shadow: $shadows;
}

Button :active...

    position: relative;
    top: 1px;

this is dangerous. You should never presume positions.

Whoa thanks for that fix! I'll edit this right away!

You never edited it. It is still missing $radius. Just show ".5em"