Skip to content

Instantly share code, notes, and snippets.

@garyharan
Created May 5, 2011 15:46
Star You must be signed in to star a gist
Save garyharan/957284 to your computer and use it in GitHub Desktop.
Useful scss mixins (rounded corners, gradients, text-field, button)
@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}');
}
@victorbstan
Copy link

There's a little mistake in your "rounded" code, maybe other places as well, but that's the one i'm using :) You are not making use of the $radius variable in your definition... you should have this code instead:

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

@garyharan
Copy link
Author

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

@bbot
Copy link

bbot commented Mar 7, 2012

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

@djave-co
Copy link

djave-co commented Jan 8, 2013

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!

@tcpadam
Copy link

tcpadam commented Jul 22, 2013

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

@chrishough
Copy link

Great guide, well done.

@sevab
Copy link

sevab commented Mar 1, 2014

From Bootstrap 3:

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

@Tusko
Copy link

Tusko commented Apr 30, 2014

@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); */

@felix-d
Copy link

felix-d commented Mar 2, 2015

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

@rafaelcamargo
Copy link

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.

@AdamStuartClark
Copy link

AdamStuartClark commented Nov 13, 2017

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)

@brndto
Copy link

brndto commented Jul 12, 2018

@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 ^^

@vaibhavshaha
Copy link

vaibhavshaha commented Oct 22, 2018

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

@jmereardon17
Copy link

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

@rokobuljan
Copy link

Button :active...

    position: relative;
    top: 1px;

this is dangerous. You should never presume positions.

@legiondesigns
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment