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

时间:2014-01-08 23:58:27

标签: css ruby compass-sass minify codekit

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

我尝试过两种方法:

  1. config.rb文件中的函数在具有不同扩展名的同一SASS文件上重新运行压缩操作,但更新“output_style”和“environment”。

  2. 手动保存两个SASS文件中的每个文件,每个文件的顶部都有一些内容,用于更新config.rb中的“output_style”和“environment”变量。

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

    选项,替代方案?

1 个答案:

答案 0 :(得分:0)

第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"