Include guidance on where mixins come in declaration order

[jeroenheijmans]

It would be good to have some guidance in the Code Guide as to where mixins should go in the declaration order within CSS. I've code guide, and also searched it using the term "mixin", but have not found any guidance on this topic yet. Given that there's other Less and Sass remarks I've assumed it's at least worth considering adding preprocessor-specific guidance.

I appreciate this can be hard, as I can already off the bat think of several different situations:

1. Single Property. Mixins to DRY up variables. E.g.:

   @mixin deep-shadow($color) {
       box-shadow: 2px 2px 4px $color, -2px -2px 4px $color;
   }
   

2. Single Property, vendor prefixes. Mixins that are semantically one thing, but solve cross-browser things. E.g.

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

3. Multiple Properties. Mixins that combine multiple properties in a logical group. E.g.:

   @mixin prime-floaty-boat() {
       display: inline-block;
       float: right;
       width: 200px;
       height: 100px;
       background-color: pink;
       border-color: gold;
       box-shadow: 2px 2px 4px #faa;
       opacity: 1;
   }
   

And there's probably others I forgot?

I guess options 1 and 2 can be placed where the actual property would go, even though with most syntax highlighting styles that might be visually offputting (at least to me).

Option 3 (and other complex options I forgot about) is a bit harder. Should it be placed where the first property would appear? In the "Misc" section? Or at the start?

Note: I'm a Sass user, and not very familiar with Less. I've assumed, perhaps erronously, that they are highly similar in this regard. Perhaps someone more knowledgeable can chime in on this?