Как я могу избежать дублирования кода во вложенном классе SCSS? - PullRequest
Новая
       9

Как я могу избежать дублирования кода во вложенном классе SCSS?

0 голосов
/ 21 ноября 2019

Я хочу избежать дублирования кода, если это возможно. То, что я сейчас делаю, по сути, заключается в том, чтобы использовать аналогичный код для #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;
    } 
}

1 Ответ

0 голосов
/ 21 ноября 2019 
@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%;
    } 
}
...