How to set up code structure and mixins?

Question

Sass

Guys, I just started learning scss and gulp, but I didn't quite understand how mixins work.
How to make sure that everything falls into place in css?
I will do this:

@mixin bShad($box-shadow) {
  -webkit-box-shadow: $box-shadow;
  -moz-box-shadow: $box-shadow;
  box-shadow: $box-shadow;
}
.block-1 {
  @include bShad(0px 0px 20px 0px rgba(150, 150, 150, 0.1) );
}
.block-2 {
  @include bShad(0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06));

Entering the second class gives the error "wrong number of arguments (2 for 1) for `bShad'". If I remove class 2, everything works.
And also tell me how to add the properties below to the first class:

transition: -webkit-transform 0.2s ease-in-out,-webkit-box-shadow 0.2s ease-in-out;
      transition: transform 0.2s ease-in-out,box-shadow 0.2s ease-in-out;
      will-change: transform,box-shadow;

The result should be copied to:

.block-1 {
  -webkit-box-shadow: rgba(150, 150, 150, 0.1) 0px 0px 20px 0px;
  -moz-box-shadow: rgba(150, 150, 150, 0.1) 0px 0px 20px 0px;
  box-shadow: rgba(150, 150, 150, 0.1) 0px 0px 20px 0px;
  transition: -webkit-transform 0.2s ease-in-out,-webkit-box-shadow 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out,box-shadow 0.2s ease-in-out;
  will-change: transform,box-shadow;
}
.block-2 {
  -webkit-box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
  -moz-box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
}

Thank you!

Answer 1

Good afternoon.
If you are using this mixin to make the property prefixed, then I think this is not the best option. Just use gulp-autoprefixer .
If we talk about the error, then it is in the following.
The console gives an error saying that you are trying to pass two arguments and the mixin only accepts one parameter. In your case, you just need to wrap the passed argument in additional brackets ( )
. Example:

@include bShad((0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06))