CSS with Mixins (Sass question)

Question

As we can see here, the normal "box-shadow" is in the bottom, what I mean is the one that doesn't have webkit, moz and ms. Why it's in the bottom? can I put it above everything else? What would be the consequence of putting it above -webkit-box-shadow? I thought it's normal to put box-shadow in the top of the list.

@mixin box-shadow($x, $y, $blur, $c){
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}

Another question I have is,

In the tutorial https://www.freecodecamp.org/learn/front-end-development-libraries/sass/create-reusable-css-with-mixins

"The definition starts with @mixin followed by a custom name. The parameters (the $x, $y, $blur, and $c in the example above) are optional. Now any time a box-shadow rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes."

It says this, $x, $y, $blur, and $c is optional? Then how am I suppose to make the css properties inside box-shadow() function work, without these parameters?

Thanks for reading this! I hope someone will answer.

Answer 1

@mixin border-radius($radius){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

#awesome {
width: 150px;
height: 150px;
background-color: green;
@include border-radius(15px);
}

https://www.w3schools.com/sass/sass_mixin_include.php

Answer 2

W3schools didn't tell why vendor prefixes should be first, but thinking about that, it seems better to put prefixes first, since the use of vendor prefixes is to make them work if it's not fully supported yet.