使用scss的mixin后，控制台发现样式代码书写顺序错乱

Question

问题描述

大家好，我在使用scss的mixin和include时，在控制台看到代码顺序是乱的，请问这是什么原因造成的，有没有解决方法。

相关scss代码

// 文字
@mixin font($family: 'Microsoft YaHei', $weight: 400, $size: 16px, $color, $align: left) {
    font-family: $family;
    font-weight: $weight;
    font-size: $size;
    color: $color;
    text-align: $align;
}

// transform兼容
@mixin transform($val) {
    -webkit-transform: $val;   
    -moz-transform: $val;       
    -ms-transform: $val;       
    -o-transform: $val;        
    transform: $val;
}

.wechat-qr-box {
    position: absolute;
    left: 50%;
    top: -282px;
    @include transform(translateX(-50%));
    display: none;
    p {
        position: absolute;
        left: 50%;
        bottom: 20px;
        @include transform(translateX(-50%));
        width: 100%;
        @include font($size: 15px, $color: #666, $align: center);
    }
}

运行结果及报错内容

我的解答思路和尝试过的方法

暂不知道顺序错乱的原因，没有头绪。

我想要达到的结果

想要控制台的代码顺序和编译器中代码顺序保持一致。
因为编译器里的scss代码是遵循css书写顺序规范的。