根据 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[ 的边缘=17=]

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>

现在只有 1 个按钮（假装另一个按钮被隐藏），注意 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;
}

减少它的唯一方法是您创建一个 class 用于显示 none 和 add/remove 通过 js。

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

Grouping common css rules based on condition in LESS/Javascript?

html

javascript

css

less

少

HTML

JS