将CSS转换为较少的选择器

Question

我有这样的CSS：

.button-navigation-container button {
   /*some properties*/
}

        .button-navigation-container button.back-button,
        .button-navigation-container button.cancel-button {
            text-align: right;
            padding-right: 2%;
        }

但是现在我想转换成更少，但我不知道我应该使用哪种选择器来获得相同风格的back-button和cancel-button。就像这样：

.button-navigation-container button {
       /*some properties*/

            /*Selector for cancel-button and back-button ?*/{
                text-align: right;
                padding-right: 2%;
            }
}

我应该使用扩展()吗？

Answer 1

较少

.button-navigation-container {
    button {
        /*some properties for button*/
        &.back-button, &.cancel-button {
            text-align: right;
            padding-right: 2%;
        }
    }
}

StyleSheet (从较少的部分生成)

.button-navigation-container button {
  /*some properties for button*/

}
.button-navigation-container button.back-button,
.button-navigation-container button.cancel-button {
  text-align: right;
  padding-right: 2%;
}