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

Question

如果可能的话，我想避免使用重复的代码。我现在正在做的本质上是使用类似的代码进行#menu-icon #close-menu唯一的区别是我在height:属性中使用的百分比值。是否有任何有效的方法来使用 SCSS 来避免使用重复的代码？

@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;
    } 
}

Answer 1

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%);
    } 
}

Answer 2

@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;
        height: 8%;
        top: 45%;
        left: 10%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }
    #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%;
    } 
}