Skip to content

Instantly share code, notes, and snippets.

@gbbowers
Created September 28, 2010 21:23
Show Gist options
  • Save gbbowers/601806 to your computer and use it in GitHub Desktop.
Save gbbowers/601806 to your computer and use it in GitHub Desktop.
add multiple box-shadows in compass pre-v.11
// Example Usage
@include multi-shadow(rgba(0,0,0,.35) 0 2px 3px 0 inset, rgba(255,255,255,.5) 0 1px 2px);
// Actual Mixin. For Compass versions prior to v.11,
// when the box-shadow syntax changed to do this for you
@mixin multi-shadow($shadow-1, $shadow-2: false, $shadow-3: false, $shadow-4: false, $shadow-5: false, $shadow-6: false, $shadow-7: false, $shadow-8: false, $shadow-9: false) {
$full: $shadow-1;
@if $shadow-2 {
$full: $full + "," + $shadow-2;
}
@if $shadow-3 {
$full: $full + "," + $shadow-3;
}
@if $shadow-4 {
$full: $full + "," + $shadow-4;
}
@if $shadow-5 {
$full: $full + "," + $shadow-5;
}
@if $shadow-6 {
$full: $full + "," + $shadow-6;
}
@if $shadow-7 {
$full: $full + "," + $shadow-7;
}
@if $shadow-8 {
$full: $full + "," + $shadow-8;
}
@if $shadow-9 {
$full: $full + "," + $shadow-9;
}
-moz-box-shadow: $full;
-webkit-box-shadow: $full;
-o-box-shadow: $full;
box-shadow: $full;
}
@malfborger
Copy link

I get " " in my output .css file. And if i remove them manually it will work. How can i arrange this automatically?

ex; box-shadow: "rgba(0,0,0,.35) 0 2px 3px 0 inset, rgba(255,255,255,.5) 0 1px 2px";

@gbbowers
Copy link
Author

Are you using compass v.11? If so, you don't need this mixin any more (and it breaks, since the syntax of the box-shadow mixin has changed). Essentially, you can just write @include box-shadow(rgba(0,0,0,.35) 0 2px 3px 0 inset, rgba(255,255,255,.5 0 1px 2px)); and it will work, without any of my hackery.

@malfborger
Copy link

aah thank you, gbbowers!

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