Bourbon 是一个基于 sass 的轻量级工具库，通过提供 mixin 和 function 简化 css 编写。使用 npm install bourbon –save-dev 安装后，在 Sass 文件中 @import ‘bourbon’ 即可引入。它支持自动添加浏览器前缀的 transition、flexbox、transform 等常用样式 mixin，提升开发效率。内置 rem 单位转换、颜色操作、strip-units 数值提取等函数，便于响应式设计与计算。开发者还可基于其封装自定义 mixin，如按钮样式复用，实现代码统一。Bourbon 适合需快速开发或维护大型样式的项目，虽现代浏览器兼容性提升，但在需支持旧版本时仍具优势。
CSS Bourbon 是一个基于 Sass 的轻量级工具库，它通过提供一系列简洁的 mixin 和 function，帮助开发者用更少的代码实现跨浏览器兼容的 CSS 样式。使用 Bourbon 可以大幅简化常见的 CSS 属性书写，尤其是在处理需要浏览器前缀或重复模式的样式时。
安装与引入 Bourbon
要开始使用 Bourbon，首先确保项目中已集成 Sass。可以通过以下方式引入：
- 使用 npm 安装：npm install bourbon –save-dev
- 在主 Sass 文件中引入：@import ‘bourbon’;
一旦引入成功，就可以在任何 Sass 文件中使用其内置的混合宏（mixin）。
简化常见 CSS 属性书写
Bourbon 提供了大量语义化、易记的 mixin，替代冗长且需手动加前缀的 CSS 写法。
立即学习“前端免费学习笔记（深入）”；
- 过渡效果（transition）：不再手动写 -webkit-transition 或 -moz-transition。
使用 @include transition(all 0.3s ease); 即可生成所有必要前缀。 - 弹性布局（flexbox）：Bourbon 封装了完整 flex 布局支持。
例如 @include display-flex; 和 @include flex-direction(column); 可快速构建响应式结构。 - 变换（transform）：旋转、缩放等操作变得简单。
@include transform(rotate(45deg) scale(1.2)); 自动处理浏览器兼容性。
使用函数和占位符提升效率
Bourbon 不仅提供 mixin，还包含实用函数，如颜色调整、尺寸计算等。
- rem 单位自动转换：通过 rem(16px) 函数，将像素值转为 rem，便于响应式设计。
- 生成网格类 mixin：结合 @include box-sizing(border-box); 等全局重置，统一元素盒模型行为。
- 利用 strip-units() 函数提取数值，方便数学运算。
自定义与扩展混合宏
你可以基于 Bourbon 提供的基础功能封装自己的 mixin，进一步提升开发效率。
例如创建一个按钮样式复用宏：
@mixin btn-style($color) {
@include background($color);
@include border-radius(4px);
@include transition(all 0.2s);
&:hover { @include darken($color, 10%); }
}
这样在多个组件中调用 @include btn-style(#007acc); 就能保持视觉一致性。
基本上就这些。Bourbon 的优势在于“写得少，做得多”，特别适合需要快速搭建原型或维护大型样式表的项目。虽然现在现代浏览器对 CSS 新特性的支持越来越好，但在仍需兼顾旧版本时，Bourbon 能显著减少出错概率并提升代码可读性。