Skip to content

Instantly share code, notes, and snippets.

@garyharan
Created May 5, 2011 15:46
Show Gist options
  • Save garyharan/957284 to your computer and use it in GitHub Desktop.
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}');
}
@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