Optimization 如何避免嵌套SCSS类中的重复代码？

如果可能的话，我想避免使用重复的代码。我现在所做的基本上是为

#菜单图标

和

#关闭菜单

使用类似的代码，唯一的区别是我在

高度：

属性中使用的百分比值。是否有任何有效的方法使用SCS来避免使用重复的代码

@import "../../resources/Variables.scss";
header {
    position: fixed;
    background-color: $color-background;
    width: 100%;
    height: 22%;
    top: 0;
    left: 0;

    #menu-icon {
        position: absolute;
        height: 8%;
        top: 45%;
        left: 10%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }

    #close-menu {
        position: absolute;
        height: 15%;
        top: 45%;
        left: 10%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
    } 
}

或者只是

@import "../../resources/Variables.scss";
header {
    position: fixed;
    background-color: $color-background;
    width: 100%;
    height: 22%;
    top: 0;
    left: 0;

    #menu-icon, #close-menu {
        position: absolute;
        top: 45%;
        left: 10%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }
    #menu-icon{
        height: 8%;
    }

    #close-menu {
        height: 15%;
    } 
}

@import "../../resources/Variables.scss";
header {
    position: fixed;
    background-color: $color-background;
    width: 100%;
    height: 22%;
    top: 0;
    left: 0;

    #menu-icon, #close-menu {
        position: absolute;
        top: 45%;
        left: 10%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }
    #menu-icon{
        height: 8%;
    }

    #close-menu {
        height: 15%;
    } 
}

You can use Mixin for avoiding duplication of code.

@mixin menu_prop($menu_height){
        height: $menu_height;
        position: absolute;
        top: 45%;
        left: 10%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
}
header {
    position: fixed;
    background-color: $color-background;
    width: 100%;
    height: 22%;
    top: 0;
    left: 0;

    #menu-icon {
        @include menu_prop(8%);
    }

    #close-menu {
         @include menu_prop(10%);
    } 
}