What happened to my shadow box SASS @ Mixin?

Question

I am trying to find a working box-shadow @mixin for SASS.

My CodePen: http://codepen.io/leongaban/pen/nCDos


In stackoverflow, I found this question and used it and the answer for sure, however I still get the following error:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") { -webkit-box-shadow:$top $left $blur $color #{$inset}; -moz-box-shadow:$top $left $blur $color #{$inset}; box-shadow:$top $left $blur $color #{$inset}; } .login_window { width: 200px; height: 100px; background: red; @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.5)); } 

How would you write it?

Answer 1

You need to add commas between the values ​​of each component:

 .login_window { width: 200px; height: 100px; background: red; @include box-shadow(inset 0, 1px, 1px, rgba(0, 0, 0, 0.5)); } 

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

Answer 2

For a simple mixin prefix, especially if the property has optional values, it would be better not to have specific arguments. In the case of a shadow window, blurring and offsetting are optional (note that your mixiin only takes into account blurring, not offset).

 @mixin box-shadow($value) { -webkit-box-shadow: $value; -moz-box-shadow: $value; box-shadow: $value; } .foo { @include box-shadow(0 0 .25em .25em black); } .bar { @include box-shadow(inset 1px 1px 1px blue); } 

Thus, you have already practiced the correct order of values, and you do not need to relearn them when your mixin prefix is ​​no longer needed. In addition, you will not have all of these commas to delete. Note that this is how Compass contains all of its prefix mixes.

Answer 3

I would recommend adding another argument for more flexibility - it's distribution ( https://www.w3schools.com/cssref/css3_pr_box-shadow.asp ):

 @mixin box-shadow($top, $left, $blur, $spread, $color, $inset: false) { @if $inset { -webkit-box-shadow: $top $left $blur $spread $color inset; -moz-box-shadow: $top $left $blur $spread $color inset; box-shadow: $top $left $blur $spread $color inset; } @else { -webkit-box-shadow: $top $left $blur $spread $color; -moz-box-shadow: $top $left $blur $spread $color; box-shadow: $top $left $blur $spread $color; } } 

Now you have a mixin that can truly generate all kinds of shadows.