CSS Compass 是一个基于 Sass 的开源框架，能帮助开发者简化 CSS 书写，其中一个实用功能是自动生成浏览器前缀，避免手动添加 -webkit-、-moz-、-o- 等私有前缀。虽然现代开发更多使用 Autoprefixer，但如果你仍在使用 Compass，它也提供了内置的 mixin 来实现这一功能。
启用 Compass 前缀支持
Compass 自带一些用于生成兼容性样式的 mixin，尤其是针对较老的浏览器。你需要先确保项目已正确安装并配置了 Compass 和 Sass。
在你的 config.rb 文件中确认 Compass 已引入：
然后在 Sass 文件中引入 Compass 的 CSS3 模块：
立即学习“前端免费学习笔记（深入）”；
@import "compass/css3";
使用 Compass 内置的 CSS3 Mixin
Compass 提供了一系列封装好的 mixin，会自动为属性添加必要的浏览器前缀。以下是一些常用示例：
-
圆角（border-radius）
.box {
@include border-radius(10px);
} 编译后会生成： .box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} -
渐变（gradient）
.bg {
@include background-image(linear-gradient(to bottom, white, black));
} 会生成包含 WebKit、Mozilla 等前缀的渐变语法。 -
过渡（transition）
.btn {
@include transition(all 0.3s ease);
} 输出： .btn {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
} -
变换（transform）
.icon {
@include transform(rotate(45deg));
}
注意与局限性
Compass 虽然能处理大部分常见属性的前缀，但它不会像 Autoprefixer 那样根据 Can I Use 数据动态判断需要哪些前缀。因此：
- 它主要支持旧版浏览器（如 IE9 及以下、旧版 Firefox/Chrome）所需的前缀。
- 对新出现的 CSS 属性支持可能滞后。
- 维护已停止（Compass 项目已于 2018 年归档），不推荐用于新项目。
如果只是维护老项目，继续用 Compass 的 mixin 没问题。若追求更好的兼容性和维护性，建议迁移到 Autoprefixer + PostCSS 方案，配合 modern build tools（如 Webpack、Vite）更高效。
基本上就这些。用好 Compass 的 css3 模块，能省去手动写前缀的麻烦，但也要清楚它的时代局限性。
