在 Sinatra 应用程序中使用 Compass 为 SCSS 设置 output_style答案

【问题标题】：Setting output_style for SCSS using Compass in Sinatra app在 Sinatra 应用程序中使用 Compass 为 SCSS 设置 output_style
【发布时间】：2013-09-20 19:53:54
【问题描述】：

我正在查看 Compass-Sinatra starter file on GitHub。有没有办法在 Sinatra 中为 scss 文件设置output_style？理想情况下，我想在开发时将样式设置为:expanded。

我想我无法理解 sass(:"stylesheets/#{params[:name]}", Compass.sass_engine_options ) 的工作原理以及我可以在哪里设置这些选项。

【问题讨论】：

我有一种感觉，我没有意识到我还需要观看或编译。

标签： sinatra sass compass-sass

【解决方案1】：

我发现将 output_style 设置添加到 compass.config 文件可用于更改 output_style。它可以放在if defined?(Sinatra) 块中，也可以放在 compass.config 文件底部的配置块中。

# compass-sinatra-starter/config/compass.config

if defined?(Sinatra)
  # This is the configuration to use when running within sinatra
  project_path = Sinatra::Application.root
  environment = :development
  output_style = :expanded  # This is where you can set the output_style
else
  # this is the configuration to use when running within the compass command line tool.
  css_dir = File.join 'static', 'stylesheets'
  relative_assets = true
  environment = :production
end

# Or if you wanted to have the output_style set for all environments(?) 

# This is common configuration
output_style = :compressed
sass_dir = File.join 'views', 'stylesheets'
images_dir = File.join 'static', 'images'
http_path = "/"
http_images_path = "/images"
http_stylesheets_path = "/stylesheets"

注意：如果您没有看到更改，则更改设置时停止/启动服务器。

例如，我在views/stylesheets/styles.scss 中有一个styles.scss 文件，那么如果我转到http://localhost:4567/stylesheets/styles.css，我将在浏览器中将.scss 文件编译为.css。更改 output_style，启动/停止 .css output_style 更改的服务器。我不知道使用 reloader 是否可行，但它可能会避免停止/启动？

我发现了其他几个很好的资源。安德鲁斯图尔特有一个blog post 和一个GitHub template

最初我试图通过 Sinatra 了解 Sass(scss) 中的媒体查询并找到了 great video Ben Schwarz posted，但它并没有涉及到设置的细节。它更多地是关于媒体查询。 Ben 也有source on GitHub。

但似乎AssetPack 是提供资产的最佳方式。

【讨论】：