css - 使用来自 Compass/Codekit 的不同配置将一个 SASS 编译为两个 css

Question

我想保存一个 SASS 文件并输出两个具有不同设置的文件，“output_style”和“environment”。

我尝试过的两种方法:

1. 在 config.rb 文件中使用不同扩展名对同一 SASS 文件重新运行压缩操作的函数，但会更新“output_style”和“environment”。

2. 手动保存这两个 SASS 文件中的每一个，并在每个文件的顶部更新 config.rb 中的“output_style”和“environment”变量。

我可以在 Grunt 中做到这一点，但我认为让 CodeKit 工作会很好。

选项，备选方案？

Answer 1

第 1 步: 开发配置 config.rb 应该如下所示:

# Basic configuration.
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line).
# Options: ":expanded", ":nested", ":compact", ":compressed"
output_style = :expanded

# Enable debugging comments that display the original location of your selectors.
line_comments = true

# Re-compile the sass files using the minified configuration.
on_stylesheet_saved do
  `compass compile -c config_minified.rb --force`
end

第 2 步:您必须添加另一个配置文件 config_minified.rb，它应该如下所示:

# Basic configuration.
http_path = "/"
css_dir = "css/minified"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

# Compressed the output for production.
output_style = :compressed

# Disable debugging comments for production.
line_comments = false

第 3 步:照常编译，您就可以开始了:

compass watch

/css/minified/style.css会自动生成。
执行这些步骤后，元素应如下所示:

/css
/css/style.css
/css/minified/style.css
/images
/sass
/sass/style.scss
config.rb
config_minified.rb

编辑

如果您不想弄乱每个元素的相对路径，您可以更改 config_minified.rb 以使用相对于根文件夹的 css 文件夹。

# do not use the css_dir = "css/minified" because it will break the images.
css_dir = "css-minified"