前端【免费下载链接】compassCompass 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点击查看免费下载本篇技术指南聚焦 CompassStylesheet Authoring Environment如何与主流 Ruby Web 应用框架深度集成覆盖 Rails 3.1 / 3 / 2.3、Sinatra 以及静态站点生成器 nanoc 三种典型场景。读完本文你将掌握为 Rails 项目快速注入 Compass、在 Sinatra 中按需编译样式、以及在 nanoc 中通过Compass.add_project_configuration与Compass.sass_engine_options让 Sass 过滤器和 Compass 配置协同工作的完整实战方案并了解这些 API 在 Compass 源码中的底层实现。集成总览Compass 的配置加载机制无论接入哪种框架集成 Compass 的核心都围绕两件事加载项目的 Compass 配置文件通常是config.rb或compass.rb以及把 Compass 的配置转换为 Sass 引擎可用的选项。Compass 在 cli/lib/compass/configuration/helpers.rb 中提供了两个公开 APICompass.add_project_configuration(configuration_file_path)读取配置文件并注册为当前项目的配置Compass.sass_engine_options调用configuration.to_sass_engine_options把 Compass 配置对象转换成传给 Sass 引擎的选项哈希供scss()模板方法或:sass过滤器直接使用。从源码看add_project_configuration会自动探测配置文件KNOWN_CONFIG_LOCATIONS定义了config/compass.rb、.compass/config.rb、config/compass.config、config.rb、src/config.rb等已知位置并在加载后依据配置中的raw_project_type决定采用何种应用集成类型:stand_alone等见 cli/lib/compass/commands/project_base.rb。这意味着你的配置文件放在哪个标准位置都能被正确识别且不同框架只需换一个入口即可复用同一套配置。Ruby on Rails 集成Compass 对 Rails 的支持覆盖多个版本接入方式随 Rails 版本不同而不同。Rails 3.1只需添加到 Gemfile在 Rails 3.1Asset Pipeline 时代中集成最简单把 Compass 加入 Gemfile 即可gem compass执行bundle install后Compass 即随应用启动被加载。cli/lib/compass/rails.rb就是为此准备的入口文件其内容仅一行require compass也就是说 Rails 应用通过require compass触发整个 Compass 环境初始化。官方另提供了一段完整的集成示例 gist原文档所附的外部链接此处不再赘述可参考其配置文件写法接入自己的项目。Rails 3使用 compass init 命令Rails 3 项目可借助 Compass 自带的项目初始化命令把 Compass 配置与目录结构注入到已有 Rails 工程中compass init rails /path/to/myrailsproject该命令由 cli/lib/compass/commands/create_project.rb 中的init命令实现它支持的“项目类型”列表中明确包含rails。解析时会把第一个参数作为project_type随后执行add_project_configuration加载配置、发现扩展discover_extensions!最终按 Rails 约定生成config/compass.rb与样式骨架。如果你的 Rails 项目已存在样式目录初始化后记得核对生成的sass_dir是否与你的实际目录一致。Rails 2.3通过 Rails Template 安装Rails 2.3 则通过 Rails 的 Template 机制完成安装rake rails:template LOCATIONhttp://compass-style.org/rails/installer该命令从远程加载 Compass 官方的 Rails installer 模板在既有 Rails 2.3 应用中生成 Compass 所需的配置与目录。注意该方式依赖官方提供的 installer 模板文件仓库内对应的实现可参考 cli/lib/compass/app_integration/stand_alone/installer.rb其负责把 Compass 模板骨架铺进目标项目。Sinatra 集成手动装配 Compass 与 Sass 渲染Sinatra 不依赖 Rails 的约定因此集成需要在应用代码中显式接线。原文档给出的完整示例在 Sinatra 的configure块中依次完成三件事引入依赖、设置 Sass 渲染选项、加载 Compass 项目配置require compass require sinatra require haml configure do set :haml, {:format :html5} set :scss, {:style :compact, :debug_info false} Compass.add_project_configuration(File.join(settings.root, config, compass.rb)) end get /stylesheets/:name.css do content_type text/css, :charset utf-8 scss :stylesheets/#{params[:name]}, Compass.sass_engine_options end get / do haml :index end要点解析set :scss, {:style :compact, :debug_info false}预先设置 Sass 默认渲染风格compact并关闭调试信息可随时覆盖。Compass.add_project_configuration(...)显式指定配置文件路径即config/compass.rb。该 API 在 cli/lib/compass/configuration/helpers.rb 中实现若传入文件路径会通过Compass::Configuration::FileData.new_from_file解析该文件并根据配置中的project_type注册相应的应用集成。路由GET /stylesheets/:name.css把:name拼成views/stylesheets/下的视图模板名再用scss模板方法渲染同时传入Compass.sass_engine_options从而让 Sass 引擎具备 Compass 提供的加载路径、函数库与配置能力。这个选项哈希正是sass_engine_options调用的configuration.to_sass_engine_options的产物见 cli/lib/compass/configuration/helpers.rb。目录约定的注意事项上述示例假设 Compass 配置文件位于config/compass.rb。如果你的样式文件放在views/stylesheets/目录而非默认的views/务必同步更新配置文件中的sass_dir否则 Compass 的加载路径与路由中的:stylesheets/#{params[:name]}将不一致。原文档还提及一个更省心的选择直接参考社区现成的compass-sinatra示例工程或使用内置了 Haml、Sass、Compass、jQuery 等能力的sinatra-bootstrap基础项目快速起步原文所附外部项目链接此处从略。nanoc 集成从“丢进去”到正式接线nanoc 是 Ruby 编写的静态站点生成器Compass 与之集成有两种层次。轻量方案直接运行 compass watch最省事的方式是直接安装 Compass然后编辑config.rb指向你的样式目录并单独开启一个终端窗口运行compass watch让它在后台监视样式变更并编译 CSSnanoc 编译流程只需引用编译产物。这种“外部编译 静态引用”的做法适合样式不复杂、希望 Compass 独立工作的场景原文档提及的示例博客项目即采用此方式。正式方案在 Rules 文件中接线 Compass更规范的集成是在 nanoc 的 Rules 文件nanoc 的编译规则定义文件位于站点根目录顶部加载 Compass 配置。原文档按 Compass 版本给出了两套 API 写法require compass Compass.add_project_configuration compass.rb # when using Compass 0.10 sass_options Compass.sass_engine_options # when using Compass 0.10 Compass.configuration.parse compass.rb # when using Compass 0.10 sass_options Compass.config.to_sass_engine_options # when using Compass 0.10当前仓库对应的是新 APICompass.add_project_configuration与Compass.sass_engine_options见 cli/lib/compass/configuration/helpers.rb旧 API 仅保留给早期版本兼容。然后在站点根目录创建compass.rb配置文件。原文档给出的完整示例配置如下http_path / project_path File.expand_path(File.join(File.dirname(__FILE__), ..)) css_dir output/stylesheets sass_dir content/stylesheets images_dir assets/images javascripts_dir assets/javascripts fonts_dir assets/fonts http_javascripts_dir javascripts http_stylesheets_dir stylesheets http_images_dir images http_fonts_dir fonts各配置项含义http_path站点根路径对应的 HTTP 前缀通常是/project_path项目根目录示例中用File.expand_path基于配置文件所在目录向上推导保证配置在不同机器间可移植css_dir/sass_dir编译输出目录与 Sass 源目录需与你的 nanoc 目录结构如output/与content/保持一致images_dir/javascripts_dir/fonts_dir各类静态资源目录http_*_dir对应资源在 URL 中的公开路径影响 Compass 生成的url()引用。注意这些路径必须与你的目录结构以及 Rules 文件中的规则相匹配——例如sass_dir指向content/stylesheets那么 Rules 中的编译规则也应针对该目录。若目录结构与示例不同请按实际情况调整。拿到sass_options之后在 Rules 文件中用:sass过滤器结合 Compass 的引擎选项编译样式compile /stylesheets/* do filter :sass, sass_options.merge(:syntax item[:extension].to_sym) endfilter :sass的第二个参数会把sass_options与当前 item 的扩展名如scss、sass合并从而让 nanoc 以正确的语法、加载路径和 Compass 扩展能力渲染样式。使用正式方案的 nanoc 项目参考采用上述正式接线方式的典型项目包括本仓库自带的文档站——compass-style.org目录本身就是一个 nanoc 工程其 Rules 与配置可作为端到端范例站点骨架位于 compass-style.org其中config.yaml、Rules、lib/下的default.rb、stylesheets.rb等文件共同构成了“Rules 加载 Compass 配置 → 过滤器编译样式”的完整实现值得对照学习。从源码理解集成 API 的可靠性最后从源码层面对三个关键 API 做一次印证帮助你判断集成代码的边界配置来源的多样性configuration_forcli/lib/compass/configuration/helpers.rb接受Data对象、Hash、可读 IO、文件路径字符串乃至 Symbol应用集成类型等多种输入因此add_project_configuration既能吃config.rb路径也能吃 Hash若传入无法识别的类型会直接raise避免静默错误。配置文件自动探测detect_configuration_file按config/compass.rb→.compass/config.rb→config/compass.config→config.rb→src/config.rb的顺序查找找不到则返回 nilcli/lib/compass/configuration/helpers.rb。Sinatra / nanoc 示例中显式传入路径的做法正是为了绕开探测顺序、精确指定配置位置。stand_alone 集成类型add_project_configuration在默认非 Rails环境下会注册:stand_alone集成其配置通过 cli/lib/compass/app_integration/stand_alone.rb 的configuration方法提供并扩展了ConfigurationDefaults为独立项目提供默认值基础。综合以上Rails 场景走 Gemfile 或compass init rails的工程化路径Sinatra 场景在configure中手动接线add_project_configurationsass_engine_optionsnanoc 场景在 Rules 文件中完成同样的两步操作并配合:sass过滤器。三者的共同底层正是 Compass 统一的配置加载与 Sass 选项转换机制——理解了它任何 Ruby 框架都能快速接入 Compass。赞分享前端【免费下载链接】compassCompass 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点击查看免费下载相关推荐RuboCop与Web框架Rails、Sinatra集成指南RuboCop与Web框架Rails、Sinatra集成指南 引言为何需要框架特定的代码检查 在Ruby Web开发中团队协作常面临 代码风格混乱 与代码质量Lint格式化静态分析开发工具Geocoder在Sinatra中的应用非Rails项目的完整集成方案Geocoder在Sinatra中的应用非Rails项目的完整集成方案 想要在Sinatra应用中实现强大的地理编码功能 Geocoder gem提供了后端Slim 模板语言完整指南核心语法、属性系统与 Rails/Sinatra 集成实战Slim 模板语言完整指南核心语法、属性系统与 Rails/Sinatra 集成实战 本文以 Slim 官方日文版文档 README.jp.md https后端上一篇猫抓 cat-catch 使用指南三步完成网页视频下载m3u8 流媒体一次合并下一篇nwpu-cram自然语言处理实验情感分析系统完整指南 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考