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

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

This box-shadow mixin doesn't expose a useful variable: blur spread.

I stole, and slightly modified it, for a tumblr theme: bbot/themes@805657e

Hiya, this is great. Might just be I'm using it wrong, but I changed the box shadow's top and left variables for the correct results

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

See this
http://css-tricks.com/snippets/css/css-box-shadow/

Thanks!

You could improve the code by doing the following:

$vendors: "-moz-", "-webkit-", ""; // you can add other vendor prefixes or remove them without needing to change the mixin.

@mixin rounded($radius: 0.5em) {
@each $vendor in $vendors {
#{$vendor}border-radius: $radius;
}
}

Great guide, well done.

From Bootstrap 3:

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

@mixin box-shadow($top, $left, $blur, $size, $color, $inset: false) {
    @if $inset {
        -webkit-box-shadow:inset $top $left $blur $size $color;
        -moz-box-shadow:inset $top $left $blur $size $color;
        box-shadow:inset $top $left $blur $size $color;
    } @else {
        -webkit-box-shadow: $top $left $blur $size $color;
        -moz-box-shadow: $top $left $blur $size $color;
        box-shadow: $top $left $blur $size $color;
    }
}
/* @include box-shadow(1px,1px,1px,0, #fff, true); */

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

Seems that wouldn't be easy remove box-shadow of an already existing element. That's because I prefer Stylus:

box-shadow($shadow)
  -webkit-box-shadow $shadow
  -moz-box-shadow $shadow
  box-shadow $shadow

box-shadow(2px 2px 6px $color)
box-shadow(none)

With this, I get whatever I need.

Box shadow can have SIX properties, not just five.

1. inset
2. offset-x (not just "left", it can be right too)
3. offset-y (not just "top", it can be bottom too)
4. blur-radius
5. spread-radius
6. color

MOZ and WEBKIT vendor prefixes are no longer required. (https://caniuse.com/#search=box-shadow)

@mixin foobar($a, $b, $c) {
    // receives args $a = 5px, $b = red, and so on
}

$myArgs: 5px red "bla bla";
// at this point, you could also programmatically add/remove arguments

@include foobar($myArgs...);

not my work ^^

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"