块中 stylelint 的默认属性顺序是什么？答案

【问题标题】：What is stylelint's default properties order within a block?块中 stylelint 的默认属性顺序是什么？
【发布时间】：2018-01-03 16:43:39
【问题描述】：

我知道答案应该很容易找到，但是我在stylelint's official website 中找到的唯一提及“订单”的是stylelint-order plugin，这看起来很有趣，但对于我的需求来说有点过分了（不打算暂时安装和配置它）。

Stylelint 建议（通过发送警告）块内属性的特定顺序，即这个块：

.my-class {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  overflow-x: hidden;
  background: #dadada;
}

将在所有内部行中发送带有property-sort-order 的警告。那么需要的顺序是什么？

【问题讨论】：

【解决方案1】：

它只是字母 (A-Z)。因此，为避免 stylelint 警告，该块中的属性应按如下顺序排列：

.my-class {
  background: #dadada;
  height: 100%;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

但是使用SASS interpolation，可以像这样忽略此命令执行：

$bg: background;

.my-class {
  height: 100%;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 0;
  #{bg}: #dadada;
}

【讨论】：