如何在不全局修改规则的前提下让SCSS混入通过Stylelint验证？

针对你的问题，有几个不用修改全局Stylelint规则的方案，你可以根据自己的需求选择：

1. 在混入局部临时禁用规则 #

这是最直接的方式，用Stylelint的注释语法，只在你的offset混入范围内禁用这条规则，完全不影响项目其他代码：

/* stylelint-disable declaration-empty-line-before */
@mixin offset($fraction: 1) {
  @if type-of($fraction) != number or not unitless($fraction) {
    @include error("#{$fraction} is not a unitless number");
  }
  margin-left: percentage($fraction);
}
/* stylelint-enable declaration-empty-line-before */

要是你想更精准（比如只忽略@if后的空行，而非整个混入的规则），也可以针对特定行做禁用：

@mixin offset($fraction: 1) {
  @if type-of($fraction) != number or not unitless($fraction) {
    @include error("#{$fraction} is not a unitless number");
  }
  /* stylelint-disable-next-line declaration-empty-line-before */
  margin-left: percentage($fraction);
}

2. 覆盖当前文件的规则配置 #

如果你的Stylelint版本是v14及以上，它支持declaration-empty-line-before规则的ignore选项。你可以在该SCSS文件顶部添加文件级别的规则覆盖，允许控制语句（比如@if）之后的声明前有空行：

/* stylelint declaration-empty-line-before: ["never", { "ignore": ["after-control-statements"] }] */

@mixin offset($fraction: 1) {
  @if type-of($fraction) != number or not unitless($fraction) {
    @include error("#{$fraction} is not a unitless number");
  }
  margin-left: percentage($fraction);
}

这样整个文件里所有控制语句后的声明前空行都会被忽略，但不会干扰项目其他文件的全局规则。

3. 调整代码结构（去掉空行） #

如果对代码可读性的要求可以妥协，或者你能接受去掉@if后的空行，直接删除空行就能快速通过验证：

@mixin offset($fraction: 1) {
  @if type-of($fraction) != number or not unitless($fraction) {
    @include error("#{$fraction} is not a unitless number");
  }
  margin-left: percentage($fraction);
}

内容的提问来源于stack exchange，提问作者CaribouCode