# @apostrophecms/stylelint-no-mixed-decls 中文文档

规范地址：https://npmcn.com/package/%40apostrophecms/stylelint-no-mixed-decls/

版本：1\.2\.0
npm 元数据更新时间：2026-10-20T16:57:47.648Z
中文译文更新时间：2026-11-06T11:02:20.200Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40apostrophecms/stylelint-no-mixed-decls
原文对照：https://npmcn.com/package/%40apostrophecms/stylelint-no-mixed-decls/?lang=original
项目主页：https://github.com/apostrophecms/stylelint-no-mixed-decls#readme
源码仓库：https://github.com/apostrophecms/stylelint-no-mixed-decls

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：16.3 kB，13 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：stylelint \>= 16\.1\.0
- 首次发布：2025-05-23T10:16:43.509Z
- 最新版本发布：2025-09-16T07:26:24.284Z
- 近 30 天下载量：49420（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

执行 Sass 的 Stylelint 插件 `mixed-decls` 规则.

## 安装

```sh
npm install @apostrophecms/stylelint-no-mixed-decls
```

也可以使用：`pnpm add @apostrophecms/stylelint-no-mixed-decls`、`yarn add @apostrophecms/stylelint-no-mixed-decls`、`bun add @apostrophecms/stylelint-no-mixed-decls`

## README

# @ 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](https://sass-lang.com/documentation/breaking-changes/mixed-decls/)

## 此插件会做什么

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

## 安装

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

## 使用量

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

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

你可以设置一个 `contain-nested` 选项以列出已知包含嵌入规则的混音符.  
这是对 [限制](https://npmcn.com/package/%40apostrophecms/stylelint-no-mixed-decls/#readme-limitations) 此插件无法分析来自其他文件的混合定义.

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

## 示例:正确使用

```scss
.foo {
  color: red;

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

  & {
    font-weight: bold;
  }
}
```

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

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

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

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

.foo {
  @include foo;

  & {
    color: red;
  }
}
```

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

.foo {
  font-weight: bold;

  & {
    color: red;
  }

  @include foo;
}
```

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

```scss
.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/
}
```

```scss
@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/
}
```

```scss
@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;
}
```

```scss
.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` 选项 :**

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

## 请进!

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

## 常见问题

### @apostrophecms/stylelint-no-mixed-decls 是什么？

执行 Sass 的 Stylelint 插件 mixed-decls 规则\.

### 如何安装 @apostrophecms/stylelint-no-mixed-decls？

在项目目录运行 npm install @apostrophecms/stylelint-no-mixed-decls，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：stylelint（\>= 16\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @apostrophecms/stylelint-no-mixed-decls 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/apostrophecms\_\_stylelint-no-mixed-decls 是否存在。

### @apostrophecms/stylelint-no-mixed-decls 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @apostrophecms/stylelint-no-mixed-decls 可以商用吗？

@apostrophecms/stylelint-no-mixed-decls 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @apostrophecms/stylelint-no-mixed-decls 的下载量有多少？

根据 npm 官方下载统计，@apostrophecms/stylelint-no-mixed-decls 在 2026/10/07 – 2026/11/05 这 30 天内被下载 49,420 次，日均约 1,647 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @apostrophecms/stylelint-no-mixed-decls 还在维护吗？

最新版本 1\.2\.0 发布于 2025/09/16（1\.1 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/05/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。