Compass项目配置参考指南：从基础到高级配置详解

Compass项目配置参考指南：从基础到高级配置详解

compass Compass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain. 项目地址: https://gitcode.com/gh_mirrors/co/compass

前言

Compass作为Sass的强大扩展工具，其配置文件是项目定制的核心。本文将全面解析Compass配置文件的各项细节，帮助开发者掌握配置技巧，充分发挥Compass的潜力。

配置文件基础

Compass配置文件采用Ruby语法，但即使没有Ruby经验也能轻松上手。配置文件主要包含两种元素：

1. 属性赋值：最基本的配置形式

   css_dir = "stylesheets"
   

2. 函数调用：用于实现更复杂的配置逻辑

配置值类型详解

基本类型

• 字符串(String)：文本内容，用单/双引号包裹

  "stylesheets"
  

• 符号(Symbol)：以冒号开头的标识符，表示有限取值

  :production
  

• 布尔值(Boolean)：true或false

复合类型

• 数组(Array)：方括号包裹的列表

  ["sass", "lib/sass"]
  

• 哈希(Hash)：键值对集合

  {:compression => Zlib::BEST_COMPRESSION}
  

特殊注意事项

Windows路径处理

Windows用户需特别注意路径中的反斜杠：

# 推荐方式一：使用单引号
css_dir = 'C:\\path\\to\\stylesheets'

# 推荐方式二：双反斜杠
css_dir = "C:\\path\\to\\stylesheets"

环境变量覆盖

命令行参数会覆盖配置文件设置：

compass compile -e production --force

可在配置文件中动态判断环境：

output_style = (environment == :production) ? :compressed : :expanded

核心配置属性解析

项目基础配置

| 属性 | 类型 | 说明 | |------|------|------| | project_type | Symbol | 项目类型(:stand_alone或:rails) | | environment | Symbol | 环境模式(:development或:production) | | http_path | String | 项目Web根路径(默认"/") |

资源目录配置

| 属性 | 类型 | 说明 | |------|------|------| | css_dir | String | CSS输出目录(默认"stylesheets") | | sass_dir | String | Sass源文件目录(默认"sass") | | images_dir | String | 图片目录(默认"images") | | fonts_dir | String | 字体目录 |

输出控制

| 属性 | 类型 | 说明 | |------|------|------| | output_style | Symbol | 输出格式(:nested, :expanded, :compact, :compressed) | | relative_assets | Boolean | 是否生成相对路径 | | sourcemap | Boolean | 是否生成sourcemap | | line_comments | Boolean | 是否添加行注释 |

高级配置技巧

插件加载

require 'ninesixty'  # 加载960.gs插件
require 'susy'       # 加载Susy网格系统

自定义导入路径

add_import_path "/shared/sass"  # 添加额外Sass导入路径

动态资源处理

自定义资源主机：

asset_host do |asset|
  "http://assets#{asset.hash % 4}.example.com"
end

缓存策略：

asset_cache_buster do |path, file|
  file ? file.mtime.strftime("%s") : "v=1.0"
end

回调函数应用

图片精灵处理

on_sprite_saved do |filename|
  optimize_image(filename) if File.exists?(filename)
end

on_sprite_generated do |sprite|
  sprite.metadata['Copyright'] = "© 2023"
end

样式表处理

on_stylesheet_saved do |filename|
  puts "#{filename} 编译成功！"
end

on_stylesheet_error do |filename, message|
  puts "错误：#{filename} - #{message}"
end

最佳实践建议

1. 环境区分：根据开发/生产环境配置不同输出

   output_style = (environment == :production) ? :compressed : :expanded
   

2. 路径管理：使用相对路径增强可移植性

3. 插件优化：按需加载插件，减少不必要的依赖

4. 错误处理：合理配置回调函数实现自动化处理

通过掌握这些配置技巧，您将能够充分发挥Compass的潜力，构建更高效、更易维护的前端工作流。

compass Compass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain. 项目地址: https://gitcode.com/gh_mirrors/co/compass