企业官网建设流程全解析

• 前端

导读

在 Compass 中，当你**未指定任何框架（framework）**创建新项目时，脚手架会自动生成一套三文件的基础样式表体系：screen.sass、print.sass与ie.sass，分别对应屏幕投影媒体、打印媒体与 IE 条件覆盖。本文以 core/templates/project/USAGE.markdown 为核心骨架，结合仓库中项目模板（core/templates/project）、安装器实现（cli/lib/compass/installers/manifest_installer.rb）与命令行实现（cli/lib/compass/commands/create_project.rb），系统讲解这套默认结构的生成原理、HTML 引用方式、目录映射规则与 partial（局部文件）机制，帮助你在实际项目中自由定制 Compass 的样式组织方式。

一、默认三文件体系：从哪里来、长什么样

1.1 生成时机与触发条件

根据 core/templates/project/USAGE.markdown 的说明：当创建项目时没有指定任何框架，Compass 会以默认的project模板初始化，并生成三个样式表文件：

• screen.sass—— 屏幕与投影显示的主样式表；
• print.sass—— 打印样式表；
• ie.sass—— 面向旧版 IE 的兼容覆盖样式表。

这一行为由模板的 manifest 清单驱动。查看 core/templates/project/manifest.rb 可以看到三个文件各自的媒体属性与条件声明：

description "The default project layout." stylesheet 'screen.sass', :media => 'screen, projection' stylesheet 'print.sass', :media => 'print' stylesheet 'ie.sass', :media => 'screen, projection', :condition => "IE"

即：screen.sass与ie.sass面向screen, projection媒体，print.sass面向print媒体，而ie.sass额外带有:condition => "IE"条件标记。

1.2 三个模板文件的初始内容

模板本身位于 core/templates/project 目录下：

• screen.sass：注释中提示"在这里编写你的主要样式（或集中管理你的 import）"，并且默认已经引入了@import compass/reset，即 Compass 的 CSS 重置模块，作为项目的起点；
• print.sass：用于定义打印样式；
• ie.sass：用于编写 IE 专属的覆盖样式。

1.3 manifest 如何驱动安装器生成 HTML 引用片段

这三个文件之所以会在生成后配套一段标准 HTML 引用代码，是因为安装器会根据 manifest 自动构造<link>标签。cli/lib/compass/installers/manifest_installer.rb 中的stylesheet_links方法逐条遍历 manifest 中的样式表条目：

• 跳过以下划线开头的 partial（局部文件，见后文）；
• 读取每个样式表的:media选项生成media="..."属性；
• 将.sass/.scss后缀替换为.css得到最终 href；
• 若条目带:condition选项，则用 IE 条件注释包裹该<link>。

这正好解释了为什么ie.sass会被包装进<!--[if IE]> ... <![endif]-->之中：条件注释的生成逻辑是安装器根据 manifest 配置自动完成的，而不是你在 HTML 里手工维护的。

二、在 HTML 中引用默认样式表

USAGE 文档给出了标准的 HTML 引用方式，这也是 Compass 默认布局的推荐用法。假设编译产物位于/stylesheets/目录下（这是 Compass 的默认 css 输出目录，见 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb）：

<head> <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> <![endif]--> </head>

要点拆解：

• screen.css与print.css通过media属性区分使用场景：屏幕/投影设备加载前者，打印时加载后者；
• ie.css被包在 IE 条件注释中，只有旧版 IE 才会真正加载这份覆盖样式，其他浏览器会将其视为注释而忽略；
• 这套结构把"常规样式—打印样式—IE 补丁"三类职责彻底分离，是 CSS 组织中最经典的分层方式。

模板文件头部的注释也贴心地内嵌了对应的引用代码，例如 screen.sass 中即写有对应的<link>示例，方便你复制使用。

三、三个文件只是建议，你可以完全自由定制

USAGE 文档明确强调：你不必强制使用这三个样式表，它们只是推荐。你可以：

• 重命名它们（如把screen.sass改为main.sass）；
• 新建更多样式表（如mobile.sass、print-landscape.sass）；
• 删除不需要的文件（例如无打印需求的项目可直接删掉print.sass）。

只要把 Sass 文件放进项目的源目录（默认是sass/），Compass 都会正常编译它们。这一点在命令层面也有直接印证：compass create支持--bare选项"不生成任何 Sass 或 CSS 文件"（见 cli/lib/compass/commands/create_project.rb），也就是说你完全可以裸建项目结构后按自己的意愿组织样式文件。

四、目录即结构：源目录文件夹与编译产物的映射

USAGE 文档说明了 Compass 一个重要的约定：你在源目录中创建的任何包含 Sass 文件的文件夹，编译后都会在输出目录中生成对应的 CSS 文件夹。

例如：

sass/ base/ reset.sass typography.sass modules/ nav.sass footer.sass

编译后会自动得到：

stylesheets/ base/ reset.css typography.css modules/ nav.css footer.css

也就是说，源目录sass/与输出目录stylesheets/（默认值见 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb）保持着逐层对应的镜像关系。你可以利用这一机制按模块、按页面或按组件维度组织样式，让目录结构直接反映最终 CSS 的结构，无需额外维护映射关系。

五、Partial（局部文件）机制：下划线开头的文件不会独立编译

5.1 基本规则

USAGE 文档介绍了 Compass / Sass 体系中至关重要的 partial 概念：

• 以下划线_开头的 Sass 文件称为 partial（局部文件）；
• partial不会被单独编译成独立的 CSS 文件；
• 它们通过@import被引入到其他样式表中使用。

例如在sass/下创建_base.sass，不会产生stylesheets/_base.css，而是需要在其他文件中：

@import base

或使用 SCSS 语法：

@import "base";

5.2 为什么这样设计

把样式拆成 partial 的价值在于：

• 保持样式表小巧、可管理、职责单一：每个 partial 只关注一件事（变量、混入、某个组件的样式），主样式表只负责组装；
• 避免重复编译：partial 不产生独立输出文件，就不会出现"同一份代码既被打包又独立输出"的冗余；
• 便于按需引入：不同入口样式表（如screen.sass与print.sass）可以各自 import 自己需要的那部分 partial。

5.3_base.sass惯例

USAGE 文档特别提到一个通行做法：在样式表目录顶层创建一个_base.sass文件，在其中集中定义项目级常量（颜色、字号、间距等变量）与混入（mixins），然后在各样式表中 import 它，实现全项目共享。

// sass/_base.sass —— 项目级基础定义 $base-font-size: 16px $primary-color: #2a6ebb @mixin rounded($radius: 3px) -moz-border-radius: $radius -webkit-border-radius: $radius border-radius: $radius

// sass/screen.sass —— 主样式表引入基础定义 @import base @import compass/reset body color: $primary-color font-size: $base-font-size

5.4 安装器对 partial 的处理印证

partial 不会被单独编译的规则不仅存在于编译器层，安装器层也严格遵守：在 cli/lib/compass/installers/manifest_installer.rb 的stylesheet_links中，生成 HTML<link>时会显式跳过以_开头的样式表文件（next if File.basename(stylesheet.from)[0..0] == "_"），确保 partial 永远不会出现在页面引用的 CSS 列表中。

六、从命令行创建默认项目（实操环节）

6.1 基本命令

在未指定框架的情况下创建默认项目，直接运行：

compass create path/to/project

path/to/project指定项目目录；不带参数时默认使用当前目录。该命令同时注册了compass init别名，用于向已有项目初始化 Compass（见 cli/lib/compass/commands/create_project.rb）。

命令的完整用法与全部选项，可查看 cli/lib/compass/commands/create_project.rb 中的选项解析定义，常用参数如下：

6.2 生成后的目录结构

一个默认的 Compass 独立项目（stand-alone，默认项目类型见 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb）大致如下：

project/ ├── config.rb # Compass 配置文件 ├── sass/ # 源码目录（默认） │ ├── screen.sass │ ├── print.sass │ └── ie.sass ├── stylesheets/ # 编译输出目录（默认） │ ├── screen.css │ ├── print.css │ └── ie.css ├── javascripts/ # 默认 javascripts 目录 └── images/ # 默认 images 目录

其中sass、stylesheets、javascripts、images这些目录的默认命名均可在 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb 中找到（sass_dir、css_dir、javascripts_dir、images_dir），并可在config.rb中按需覆盖。

6.3 安装器执行流程

从源码结构看，项目生成实际由安装器完成：ManifestInstaller继承自Base，遵循prepare → install → finalize三步策略（见 cli/lib/compass/installers/base.rb）。其中init阶段会根据 manifest 中声明的内容创建sass/与stylesheets/目录（见 cli/lib/compass/installers/manifest_installer.rb），install阶段则按 manifest 条目顺序逐一落地文件（见 cli/lib/compass/installers/manifest_installer.rb）。模板文件在安装时会按配置的preferred_syntax自动转换语法（cli/lib/compass/installers/base.rb），因此即使模板写的是.sass，你指定-x scss时得到的也是.scss文件。

七、最佳实践小结

综合 USAGE 文档与仓库实现，一套稳妥的 Compass 项目起步策略是：

1. 保留三文件骨架：screen.sass承载主体样式、print.sass处理打印、ie.sass兜底旧浏览器，职责清晰，配套 HTML 引用代码由安装器按 manifest 自动生成，开箱即用；
2. 用 partial 拆分模块：所有可复用的变量、混入与组件样式都放进下划线开头的 partial，避免生成冗余 CSS 文件；
3. 建立_base.sass共享层：把项目级常量与混入集中于此，各入口样式表统一@import base；
4. 善用目录映射：按业务模块在sass/下建子目录，编译产物自动镜像，长期维护成本最低；
5. 必要时自由裁剪：三个默认文件只是建议，可以重命名、增删，compass create --bare甚至允许你完全不生成任何样式文件，从零开始搭建自己的组织方式。

以上规则均可在本仓库的以下文件中进一步验证与深入：

• 模板与说明：core/templates/project/USAGE.markdown、core/templates/project/manifest.rb、core/templates/project/screen.sass
• 安装器实现：cli/lib/compass/installers/manifest_installer.rb、cli/lib/compass/installers/manifest.rb、cli/lib/compass/installers/base.rb
• 命令与默认配置：cli/lib/compass/commands/create_project.rb、cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb

• 前端