在LESS/Javascript中根据条件对常见css规则进行分组？

我正在寻找一些重构帮助，将常用按钮属性分组到一个规则下，以减少CSS规则的代码量

逻辑基本上是说，如果“show footer”为真，那么我会并排显示两个按钮。否则，我将显示一个100%宽度的按钮。我想尝试根据第一条规则对任何基本按钮属性进行分组，但不确定如何清理

有没有办法从两个自定义元素中抽象出该逻辑，并将其放入第一个较少的规则中，使其看起来不那么脆弱

较少的 HTML

---

我相信您可以通过flex实现这一点

您需要在按钮上添加

flex grow:1

，这样当只有1个按钮时，它们将扩展到您的容器宽度，并且在容器上添加

justify content:space-between

，以便按钮位于let和right的边缘

div{
显示器：flex；
调整内容：之间的间距
}
钮扣{
柔性生长：1；
}

取消
拯救

我相信您可以通过flex实现这一点

您需要在按钮上添加

flex grow:1

，这样当只有1个按钮时，它们将扩展到您的容器宽度，并且在容器上添加

justify content:space-between

，以便按钮位于let和right的边缘

div{
显示器：flex；
调整内容：之间的间距
}
钮扣{
柔性生长：1；
}

取消
拯救

我仍然需要两个按钮，因为它们都有“取消”和“保存”，只是有条件的。是的，我知道我只是在向您展示这两种情况的外观，您的js/html没有改变。明白了。但我仍然需要考虑条件可见性。在这种情况下是如何工作的？对不起，什么是条件可见性？通过将display none设置为需要显示/隐藏按钮的按钮，可以以相同的方式显示/隐藏按钮。你是这个意思吗？对。因此，根据javascript中的条件，我需要改变按钮的可见性。那么，我还需要为每个按钮设置两个css规则吗？我还需要两个按钮，因为它们都有取消和保存，只是有条件的。是的，我知道我只是在向你展示这两种情况的外观，你的js/html没有改变。明白了。但我仍然需要考虑条件可见性。在这种情况下是如何工作的？对不起，什么是条件可见性？通过将display none设置为需要显示/隐藏按钮的按钮，可以以相同的方式显示/隐藏按钮。你是这个意思吗？对。因此，根据javascript中的条件，我需要改变按钮的可见性。那么，我还需要为每个按钮设置2个css规则吗？

  > .editor-properties > .editor-btn-group > button {
    display: none;
  }
}

@{customElementNamespace}search-settings.show-save {
  > .editor-properties > .editor-btn-group > .editor-save {
    display: block;
    width: 100%;
  }
}

@{customElementNamespace}search-settings.save-cancel {
  > .editor-properties > .editor-btn-group > button {
    width: 49%;
    display: inline-block;
  }
}

<div class="editor-btn-group">
  <button class="editor-cancel is-negative">
      <span class="fa fa-times"></span>
      <span>
          Cancel
      </span>
  </button>
  <button class="editor-save is-positive">
       <span class="fa fa-floppy-o">
       </span>
      <span>
          Save
      </span>
  </button>
</div>

showSave: function() {
    this.$el.toggleClass('show-save', this.options.showSave === true);
},
showCancel: function() {
    this.$el.toggleClass('save-cancel', this.options.showFooter === true);
},