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

2024-05-17 • 问答

如果可能，我想避免使用重复的代码。我现在所做的基本上是为#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;
    } 
}

k4a_calibration_t calibration;
k4a_image_t xy_table = NULL;
/*
Calibration initialization codes here
*/
create_xy_table(&calibration,xy_table);

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

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

jiang8com 回答：如何避免在嵌套的SCSS类中重复代码？

大家都在问