Grow your CSS skills. Land your dream job.

sass mixin with a variable?

  • # April 17, 2013 at 6:30 pm

    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!

    # April 17, 2013 at 6:54 pm

    @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

    # April 18, 2013 at 7:58 am

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

    # April 18, 2013 at 3:45 pm

    Good one @HugoGiraudel

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".