css - compass 不同的 css 输出路径和 url 助手

标签 css ruby sass compass-sass

我在 compass 元素中遇到了不同的 .css 输出路径(到特定文件)的问题。

假设我有这样的目录树:

 /
 ..Fonts
 ..Folder
 ..Images
 ..Sass
   .._mixins.scss
   ..[other_stuff]
 ..Styles
 ..config.rb

这是我的config.rb:

http_path = "/"
css_dir = "Styles"
sass_dir = "Sass"
images_dir = "Images"
javascripts_dir = "Scripts"
fonts_dir = "Fonts"

output_style = :nested
relative_assets = true
color_output = false

目标

我需要在“文件夹”目录中使用 sass,我的意思是必须将一些 example.scss 文件编译成“文件夹”中的 example.css。但是,我必须将 compass 与相对 url 帮助器和一些在“Sasss/_mixins.scss”文件中定义的 mixins 一起使用。

问题

问题是,我无法为 example.scss 指定不同的输出路径,因为 scss 的输出路径在 config.rb 中指定(Styles ),对吧?好的,所以我尝试将 ruby​​ 代码添加到 config.rb 以便在将 example.css 从“样式”目录编译到“文件夹”目录后将其移动,如下所示:

require 'fileutils'
on_stylesheet_saved do |file|
  if File.exists?(file) && File.basename(file) == "example.css"
    puts "Moving: #{file}"
    FileUtils.mv(file, File.dirname(file) + "/../Folder/" + File.basename(file))
  end
end

但是,现在 relative image-url() 不能正常工作,因为它是在“Styles”目录中编译的,因此 url 是相对于这个目录而不是“文件夹”目录的。

解决方案?

所以我的问题是:实现此目标的最佳方法或技巧是什么?

最佳答案

唯一优雅的解决方案是将您的 Galleria 子元素移动到一个单独的元素中。您实际上有两个元素,为什么要将它们作为一个元素来管理?相反,将它们分开并在部署期间将它们放在一起。

或者,从子元素中创建一个 Compass 扩展(如果它的结构和您在其中所做的更改数量允许这样做)并通过导入(直接或通过混合)将必要的东西注入(inject)到您的主元素中。

一个肮脏的解决方案是使用符号链接(symbolic link):

cd Styles
ln -s ../Folder Folder

然后创建Sass/Folder/foo.sass

但这会使 compass compile 变得疯狂并每次都重新创建整个元素(而不是只覆盖修改过的文件)。

您也可以尝试创建相反方向的符号链接(symbolic link),但您必须确保您的网络服务器allows following符号链接(symbolic link)

关于css - compass 不同的 css 输出路径和 url 助手,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17408504/

相关文章:

jquery - Less\Sass\JQuery 中带有 HTML 参数的 CSS 类?

sass - 在 Plunker 中使用 sass?

html - 带有文本和图像的水平菜单

javascript - 如何在使用 JQuery 更改 CSS 时添加淡入淡出效果

javascript - 在文档准备好图像源后使用 JQuery 居中图像

css - 填充 IE、FF、Chrome 的问题

java - 如何通过 Ruby 从服务器获取数据,然后将这些数据传递到 Java/Android 类中?

ruby-on-rails - Rails/lib 模块和

ruby-on-rails - Rails 访问哈希值

ruby-on-rails - Bootstrap 切换到 Sass Javascript 错误