How to create a @mixin for CSS dropshadow

Question

I am having trouble creating a @mixin for a drop shadow. The drop shadow I want in regular CSS is as follows

-webkit-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.2);

The @mixin I have created is as such

@mixin box-shadow(
    $top, $left, $blur, $size, $color) {
}

Then to use this I have added the below to my scss file

@include box-shadow(0, 2px, 3px, 2px, rgba(0, 0, 0, 0.2));

However, it is broken as I do not see any drop shadow CSS being applied once the SCSS is compiled.

Hi, can you provide us with the resulting CSS file ? – Jaay Jan 31 '18 at 09:47 — Jaay, Jan 31 '18 at 09:47

score 6 · Answer 1 · answered Jan 31 '18 at 10:02

6

Try this: Fiddle

@mixin box-shadow($top, $left, $blur, $size, $color) {
   -webkit-box-shadow: $top $left $blur $size $color;
   -moz-box-shadow: $top $left $blur $size $color;
   box-shadow: $top $left $blur $size $color;
}

.box{
  width:150px;
  height:150px;
  background:blue;
  @include box-shadow(2px,2px,5px,0, rgba(0,0,0,0.6));
}

answered Jan 31 '18 at 10:02

Ganesh Yadav

2,607
2
29
52

This answer worked for me. Thank you to you and everyone who helped :) – Al-76 Jan 31 '18 at 10:06
Accept helpful answer. Just click green sign below up and down vote. – Ganesh Yadav Jan 31 '18 at 10:15

score 1 · Answer 2 · answered Jan 31 '18 at 09:59

1

It looks like you've left out declaring the box-shadow rules in your mixin.

It should look like this:

@mixin box-shadow($top, $left, $blur, $size, $color) {
  box-shadow: $top $left $blur $size $color
}

Add the vendor prefixes as you need.

fiddle

answered Jan 31 '18 at 09:59

sol

22,311
6
42
59

score 0 · Answer 3 · edited Jan 31 '18 at 11:01

0

I use this

/* BOXSHADOW */
@mixin boxshadow(@x: 0, @y: 0, @blur: 0, @spread: 0, @rgba: rgba(0, 0, 0, 1.0)) {
  -webkit-box-shadow: @x*@rem @y*@rem @blur*@rem @spread*@rem @rgba;
  -moz-box-shadow:    @x*@rem @y*@rem @blur*@rem @spread*@rem @rgba;
  box-shadow:         @x*@rem @y*@rem @blur*@rem @spread*@rem @rgba;
}

@include boxshadow(0, 0, 10, -5, rgba(220, 220, 220, 1.0));

edited Jan 31 '18 at 11:01

Al-76

1,738
6
22
40

answered Jan 31 '18 at 09:53

Sebastian Heinrich

84
5

1

Ekks .. Thank you but this seems to break real bad :( – Al-76 Jan 31 '18 at 10:00

score 0 · Answer 4 · answered Jan 31 '18 at 17:11

0

You could try to use Compass. It provides a lot of mixins for the most common CSS rules, including box-shadow. It also transparently add cross-browser prefixes while using its mixins.

answered Jan 31 '18 at 17:11

Davide Caruso

104
2
5

How to create a @mixin for CSS dropshadow

4 Answers4