The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS sass mixin with a variable?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #44193
    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?



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

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

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


    Good one @HugoGiraudel

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.