从SASS迁移至PostCSS后，如何实现含map-get的断点Mixin？

首先明确：PostCSS本身不原生支持变量、mixin和map-get，得靠对应插件配合——你已经装了postcss-map-get，还需要postcss-simple-vars（处理变量）和postcss-mixins（处理mixin），先确保这三个插件都已安装。

1. PostCSS配置（postcss.config.js） #

插件顺序很关键，必须按「变量→map-get→mixin」的顺序加载：

module.exports = {
  plugins: [
    require('postcss-simple-vars'),
    require('postcss-map-get'),
    require('postcss-mixins')
  ]
};

2. 实现断点Mixin和断点变量 #

PostCSS语法和Sass有细微差异，对应你的Sass代码，写法如下：

/* 定义断点map变量 */
$bps: (
  "mob": 480px,
  "tab": 768px,
  "desk": 1200px,
  "deskBig": 1600px
);

/* 定义max-width断点mixin */
@define-mixin bp-max $bp {
  @media (max-width: map-get($bps, $bp)) {
    @mixin-content;
  }
}

3. 使用mixin #

调用方式和Sass类似：

.container {
  width: 100%;
  @mixin bp-max tab {
    padding: 0 15px;
  }
}

和Sass的核心差异 #

• PostCSS的mixin定义用@define-mixin，调用用@mixin，而Sass统一用@mixin
• PostCSS中mixin的内容块用@mixin-content，代替Sass的@content
• 必须依赖对应插件才能实现变量、map-get和mixin功能，插件顺序不能乱

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