sass mixin with a variable?

[Nathan Gross]

Working on a project, I have the following sass mixin:

@mixin boxshadow {
box-shadow: 0 1px 2px darken($brand-color, 20%);
}

This is great where the box shadow is sitting on the $brand-color background.

But what if I wanted to use that same mixin where the the background color is not $brand-color. Is there another way that I could set that up so that it just darkens the color that the shadow is “sitting” on—kind of like multiply or darken in Photoshop?

Thanks!

[Alen]

@mixin boxshadow($h: 0px, $v: 1px, $b:2px, $brand-color: rgba(0,0,0,.25)){
-webkit-box-shadow : $h $v $b $brand-color;
-moz-box-shadow : $h $v $b $brand-color;
box-shadow : $h $v $b $brand-color;
}

Using it, like so:

div{
@include boxshadow(0px,1px,2px,rgba(green,0.4));
}

If you don’t specify any options and use the mixin as `@include boxshadow()` default styles defined in the mixin will be applied.

http://codepen.io/anon/pen/mgqcC

[Kitty Giraudel]

If you ever want a box-shadow mixin able to accept and output multiple shadows, I just made one:

@mixin shadow($list) {
$res: null;
@each $s in $list { $res: $res, unquote($s); }
@include experimental(box-shadow, $res, -moz, -webkit, not -o, not -ms, not -khtml, official);
}

div {
@include shadow( (“inset 0 1px 1px red”, “2px 2px black”) );
}

[Alen]

Good one @HugoGiraudel

[Author]

Posts