Question

考虑以下Less代码：

.a {
  button,
  input[type='button'],
  input[type='submit'],
  input[type='reset'] {
    background: red;
  }
}

.b {
  button,
  input[type='button'],
  input[type='submit'],
  input[type='reset'] {
    background: blue;
  }
}

我希望能够以可重复使用的方式定义四种可能的按钮类型。我曾经能够在SASS中轻松完成这项工作，但为了使用Semantic UI，我已切换到Less。我无法在Less中找到执行此操作的语法 - 是否可能？

Answer 1

好的，我现在有一个解决方案，来自this post：

@all-buttons: {
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'] {
    .get-props()
  }
};

.set-props(@selectors; @rules; @extension: ~'') {
  @selectors();
  .get-props() {
     &@{extension} { @rules(); }
  }
}

.all-buttons(@rules; @extension: ~'') {
  .set-props(@all-buttons; @rules; @extension);
}

.a {
  .all-buttons({
    background: red;
  });
}

.b {
  .all-buttons({
    background: blue;
  });
}

// Also enables an extension such as a pseudo selector for each button type
.c {
  .all-buttons({
    background: green;
  }, ~':hover');
}

无法在Less中定义可重复使用的逗号分隔选择器列表

1 个答案: