什么是一个块中的stylelint默认属性顺序？

Posted 2021-05-03

我知道答案应该很容易找到，但是我在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警告。那么所需的订单是什么？

答案

它只是字母（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;
}