使用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"