如何在PostCSS中正确编写$widthStandard变量对象？

错误原因 #

你当前的写法$widthStandard: { ... }不符合PostCSS原生语法——PostCSS原生变量仅支持存储单一值，无法直接定义对象形式的属性集合，这才导致了"Could not resolve the variable '$widthStandard' within '$widthStandard:'"的错误。

正确实现方式 #

根据需求，推荐两种可行方案：

方案1：使用PostCSS Mixins实现属性复用（最常用） #

这种方式适合快速复用一组CSS属性，需要借助postcss-mixins插件：

1. 安装插件：

npm install postcss-mixins --save-dev

2. 在PostCSS配置文件（如postcss.config.js）中启用插件：

module.exports = {
  plugins: [
    require('postcss-mixins'),
    // 其他插件...
  ]
}

3. 定义并使用复用块：

$containerDefaultWidth: 90%;
$containerMaxWidth: 1200px;

// 定义复用块
@define-mixin widthStandard {
  width: $containerDefaultWidth;
  max-width: $containerMaxWidth;
  margin: 0 auto;
}

// 在需要的地方调用
.container {
  @mixin widthStandard;
}

方案2：兼容Sass风格的Map写法（需依赖PostCSS Sass兼容插件） #

如果习惯Sass的Map语法，可以使用postcss-sass插件实现：

1. 安装插件：

npm install postcss-sass --save-dev

2. 配置PostCSS启用该插件，然后编写如下代码：

$containerDefaultWidth: 90%;
$containerMaxWidth: 1200px;

// 定义Map形式的变量集合
$widthStandard: (
  width: $containerDefaultWidth,
  max-width: $containerMaxWidth,
  margin: 0 auto
);

// 使用时遍历Map属性
.container {
  @each $prop, $value in $widthStandard {
    #{$prop}: $value;
  }
}

内容的提问来源于stack exchange，提问作者Sazzad Hossain Nibir