使用Compass/Codekit中的不同配置将一个SASS编译为两个css
我想保存一个SASS文件并输出两个具有不同设置的文件,“输出样式”和“环境” 我尝试过两种方法:使用Compass/Codekit中的不同配置将一个SASS编译为两个css,css,ruby,compass-sass,minify,codekit,Css,Ruby,Compass Sass,Minify,Codekit,我想保存一个SASS文件并输出两个具有不同设置的文件,“输出样式”和“环境” 我尝试过两种方法: 函数在config.rb文件中运行,以在具有不同扩展名的相同SASS文件上重新运行压缩操作,但会更新“output_style”和“environment” 手动保存两个SASS文件中的每个文件,每个文件的顶部都有更新config.rb中“output_style”和“environment”变量的内容 我可以用Grunt做这个,但我想只要有CodeKit工作就好了 选择,替代方案 步骤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
# 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
/css
/css/style.css
/css/minified/style.css
/images
/sass
/sass/style.scss
config.rb
config_minified.rb
步骤2:您必须添加另一个配置文件config\u minified.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
# 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
/css
/css/style.css
/css/minified/style.css
/images
/sass
/sass/style.scss
config.rb
config_minified.rb
第3步:像往常一样编译,然后就可以开始了:
compass watch
将自动生成/css/minified/style.css
。执行这些步骤后,项目应如下所示:
# 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
# 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
/css
/css/style.css
/css/minified/style.css
/images
/sass
/sass/style.scss
config.rb
config_minified.rb
编辑
如果你不想弄乱每个项目的相对路径,你可以修改config\u minified.rb
以使用相对于根文件夹的css文件夹
# do not use the css_dir = "css/minified" because it will break the images.
css_dir = "css-minified"
让我惊讶的是没有其他人需要这个。。。