@ apostrophicecms/ stylelint- no- mixed- decls

执行 Sass 的 Stylelint 插件 mixed-decls 规则——要求根据萨斯的最新行为命令声明和巢规则.

自萨斯起 1.77.0+,CSS区块不能再自由地混合声明和嵌入规则.
如果要在嵌入规则之后声明额外的样式,这些声明必须放在 & { } 块.

见: https://sass-lang.com/documentation/break-changes/mixed-decls/ 互联网档案馆的存檔,存档日期2013-12-12

此插件会做什么

• 防止在CSS区块内出现嵌入规则后的声明,除非它们被包裹在 & { } 块.
• 处理 @include 可能包含嵌入规则的语句.

安装

npm install @apostrophecms/stylelint-no-mixed-decls --save-dev

使用量

添加到您的样式林特配置 :

{
  "plugins": [ "@apostrophecms/stylelint-no-mixed-decls" ],
  "rules": {
    "@apostrophecms/stylelint-no-mixed-decls": true
  }
}

你可以设置一个 contain-nested 选项以列出已知包含嵌入规则的混音符.
这是对 限制 此插件无法分析来自其他文件的混合定义.

{
  "plugins": [ "@apostrophecms/stylelint-no-mixed-decls" ],
  "rules": {
    "@apostrophecms/stylelint-no-mixed-decls": [
      true,
      {
        "contain-nested": [ "external-mixin-known-to-contain-nested-rules" ]
      }
    ] 
  }
}

示例:正确使用

.foo {
  color: red;

  &--large {
    font-size: 24px;
  }

  & {
    font-weight: bold;
  }
}

@mixin foo {
  display: block;
  clear: both;
}

.foo {
  @include foo;
  @include external-mixin; // not known to contain nested rules
  color: red;
}

@mixin foo {
  display: block;
  clear: both;

  &--large {
    font-size: 24px;
  }
}

.foo {
  @include foo;

  & {
    color: red;
  }
}

@mixin foo {
  & {
    display: block;
    clear: both;
  }
}

.foo {
  font-weight: bold;

  & {
    color: red;
  }

  @include foo;
}

示例:使用不当(将报告)

.foo {
  color: red;

  &--large {
    font-size: 24px;
  }

  font-weight: bold; // ❌ Cannot mix declarations and nested rules. Group them together or wrap declarations in a nested "& { }" block. See https://sass-lang.com/documentation/breaking-changes/mixed-decls/
}

@mixin foo {
  display: block;
  clear: both;

  &--large {
    font-size: 24px;
  }
}

.foo {
  @include foo;
  color: red; // ❌ Cannot mix declarations and nested rules. Group them together or wrap declarations in a nested "& { }" block. See https://sass-lang.com/documentation/breaking-changes/mixed-decls/
}

@mixin foo {
  display: block; // ❌ Cannot mix declarations and nested rules. Group them together or wrap declarations in a nested "& { }" block. See https://sass-lang.com/documentation/breaking-changes/mixed-decls/
  clear: both; // ❌ Cannot mix declarations and nested rules. Group them together or wrap declarations in a nested "& { }" block. See https://sass-lang.com/documentation/breaking-changes/mixed-decls/
}

.foo {
  font-weight: bold;

  & {
    color: red;   
  }

  @include foo;
}

.foo {
  @include external-mixin-known-to-contain-nested-rules;

  color: red; // ❌ Cannot mix declarations and nested rules. Group them together or wrap declarations in a nested "& { }" block. See https://sass-lang.com/documentation/breaking-changes/mixed-decls/
}

为什么这很重要

这个插件确保您的 Sass 代码遵守现代 CSS 嵌入行为, 防止破解基于更新的 Sass 版本, 并保持您的代码库 干净的结构.

限制

此插件只分析正在内嵌的相同文件中定义的混音符 . 它不解决或检查其他文件中的混合定义, 即使这些文件是通过 Sass 导入的 @use 或者说 @import。 。 。 .

结果:

• 如果一个同名混合符存在于多个不同内容的文件 这个插件只知道 混合定义.

• 它不会在别处定义或包含的混合体中检测到嵌入规则 从外部文件.

建议:

为了确保准确的林入结果,一致界定与嵌入规则的关键混合 或用他们使用的代码来拼凑他们. 另一种办法是,将申报包到后面 @include 声明 在巢穴中 & { } 块作为安全默认值,当不确定混音内容时.

使用 contain-nested 选项 :

此选项可用于列出已知含有嵌入规则的混音符, 这样插件就可以相应处理它们, 即使它们的定义不在文件中,它们也会被使用.

请进!

我们欢迎捐款! 如果你发现一个错误或东西缺失, 请打开一个问题或提交拉动请求.