compass watch 使用教程：让 compass-html5-boilerplate 的 SCSS 自动编译成 CSS
【免费下载链接】compass-html5-boilerplateCompass version of the Html5 Boilerplate project by Paul Irish项目地址: https://gitcode.com/gh_mirrors/co/compass-html5-boilerplate
写 SCSS 还要手动编译成 CSS？太浪费时间了。今天这篇compass watch 使用教程，教你一条命令让 compass-html5-boilerplate 项目里的 SCSS 文件在保存的瞬间自动编译成 CSS，从此告别重复劳动。compass-html5-boilerplate 是 Paul Irish 的 HTML5 Boilerplate 的 Compass 扩展版本，内置了模块化的 SCSS 样式库和完整的项目骨架，配合compass watch监听模式，可以做到"改完即编译"，是新手快速上手前端项目开发的最佳搭档。
compass watch 是什么？为什么前端开发离不开它
compass watch是 Compass 提供的文件监听命令。启动后，它会持续监视项目中的 SCSS 源文件，一旦检测到文件被修改保存，就会自动增量编译对应的 CSS 文件，无需手动执行编译命令。
对使用 compass-html5-boilerplate 的开发者来说，这意味着：
- 保存即编译：写一行样式，刷新浏览器立刻看到效果
- 自动增量更新：只编译改动过的文件，速度飞快
- 错误实时反馈：语法写错会在终端立刻报错，方便第一时间修复
- 支持 Haml 模板联动：项目同时生成的 Haml 布局文件也能一起维护
快速上手：安装并创建 compass-html5-boilerplate 项目
第一步：安装依赖 gem
首先确保本机已安装 Ruby 环境，然后执行：
gem install html5-boilerplate该 gem 会自动带上compass和compass-h5bp两个依赖（见 html5-boilerplate.gemspec），无需单独安装。
第二步：用 compass create 生成项目骨架
compass create my_project -r compass-h5bp -r html5-boilerplate -u html5-boilerplate --javascripts-dir js --css-dir css生成成功后，my_project目录里会包含一整套 HTML5 Boilerplate 标配文件：
| 类型 | 文件 |
|---|---|
| 页面模板 | index.html、404.html、index.html.haml |
| 样式源文件 | src/style.scss、src/partials/ 下的 5 个分片 |
| 前端脚本 | js/jquery-1.6.2.min.js、modernizr-2.0.6.min.js、plugins.js、script.js |
| 站点配置 | robots.txt、humans.txt、crossdomain.xml、.htaccess |
| 图标资源 | favicon.ico、apple-touch-icon-*.png |
一键启动：compass watch 自动编译 SCSS 的正确姿势
最简单的一行命令
compass watch my_project输入回车后，终端会进入监听状态。此时src/style.scss及其 import 的所有 partials 分片一旦被保存，就会自动编译输出到 css/style.css，整个过程无需任何手动干预。
watch 模式下的编译逻辑
compass-html5-boilerplate 的样式入口是src/style.scss，它的 import 顺序决定了最终的 CSS 结构：
@import "partials/base"; // 颜色、字体等默认变量 @import "h5bp"; // HTML5 Boilerplate 核心样式库 @include h5bp-normalize; // 引入 normalize 重置样式 @import "partials/fonts"; // 字体样式 @import "partials/page"; // 页面自定义样式 @include h5bp-helpers; // 工具类 @import "partials/media"; // 响应式与打印样式（放最后）所以你会发现，随便改哪个分片文件，style.css 都会整体重新编译，这正是 compass watch 帮你省掉的工作量。
认识项目里的 SCSS 文件结构：改哪里、看哪里
compass-html5-boilerplate 把样式拆成了几个职责清晰的分片（对应 templates/project/partials/ 目录），新手照着改就行：
style.scss：主入口文件
所有分片的"组装车间"，一般不需要改，除非你要调整 import 顺序或取消某段注释。比如想要更细粒度地控制 mixin，可以取消//@import "partials/overrides";的注释，改用逐条引入的方式。
_base.scss：全局变量集中营
定义了整套配色和排版变量，如$font-color、$link-color、$line-height等，改一处全局生效，非常符合"写样式不重复"的理念。
_page.scss：你的主战场
页面级自定义样式都写在这里，body、#container、header、#main、footer的选择器已经替你占好位，直接往里填样式即可。
_media.scss：响应式与打印样式
内置了 480px、768px 两个断点的媒体查询占位，以及@media print打印样式，做响应式布局时直接在这些代码块里补充规则。
常见问题与避坑指南
Q1：compass watch 报错说找不到 h5bp？说明compass-h5bp没有正确加载。创建项目时务必带上-r compass-h5bp参数，或者在 config.rb 里手动require "compass-h5bp"。
Q2：修改了 SCSS 但 css 目录没有新文件？检查命令行当前目录是否正确。compass watch需要指向项目根目录（包含 config.rb 的那一层），例如compass watch my_project。
Q3：想快速查看项目源码？可以直接克隆仓库到本地研究模板结构：
git clone https://link.gitcode.com/i/f71bb7efe7b377ed061793dbc421200f重点看 templates/project/manifest.rb，它定义了项目生成时所有文件的映射关系，是理解整套模板的最佳入口。
总结：让 compass watch 成为你的日常习惯
一句话总结今天的compass watch 使用教程：compass watch让 compass-html5-boilerplate 的 SCSS 自动编译成 CSS，改完即见效果，大幅提升前端开发效率。装好 gem、创建项目、敲下命令，三步即可开启"保存即编译"的丝滑体验。快去试试吧！🚀
【免费下载链接】compass-html5-boilerplateCompass version of the Html5 Boilerplate project by Paul Irish项目地址: https://gitcode.com/gh_mirrors/co/compass-html5-boilerplate
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
