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

Question

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

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

有没有办法从两个自定义元素中抽象出逻辑并将它们放入第一个 LESS 规则中以使其看起来不那么脆弱？

少

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

HTML

<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>

JS

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

Answer 1

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

你需要按钮上的flex-grow: 1，这样当容器上只有1个按钮和justify-content: space-between时它们会增长到你的容器宽度，所以按钮在let和right的边缘

div {
  display: flex;
  justify-content: space-between
}
button {
  flex-grow: 1;
}

<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>

现在只有一个按钮（假装另一个按钮被隐藏），注意css是一样的

div {
  display: flex;
  justify-content: space-between
}
button {
  flex-grow: 1;
}

<div class="editor-btn-group">
  <button class="editor-cancel is-negative">
      <span class="fa fa-times"></span>
      <span>
          Cancel
      </span>
  </button>
  
</div>

用于显示您只需要的按钮

.show-save .editor-cancel,
.show-cancel .editor-save { 
    display: none;
}

减少这种情况的唯一方法是创建一个不显示的类并通过 js 添加/删除它。