访问 SASS 文件中的 http_images_path 常量

发布于 2024-12-27 19:14:54 字数 590 浏览 0 评论 0原文

我正在尝试为高密度显示器（如 iPhone 4+ 视网膜显示器）编写 @mixin。因此，我想自动将 "@2x" 作为图像文件名的后缀。

由于 image-url() 会返回整个路径，因此我无法附加后缀。不是我试图访问我在配置中设置的图像路径，以自行将 URL 修补在一起。

就像：

   background: $color url("#{$http_images_path}"+"#{$image-name}"+"@2x"+"#{$image-extension}") $x $y no-repeat

但是 #{$http_images_path} 未定义。有办法访问它吗？我真的不想单独定义图像路径，因为它会使配置变得非常不必要。

如果我可以在“.”之前分割 image-url() 的返回结果，那就更好了。扩展名并添加“@2x”，因为我不需要单独定义扩展名。我尝试在 sass 文件中使用 Ruby，例如 puts "test" 但它不起作用。所以我不确定是否有办法用 sass 分割字符串。

你们有什么好主意吗？

谢谢！亚历克斯

原文

I'm trying to write a @mixin for High Density Display like the iPhone 4+ Retina Display. Therefore I want to automatically append "@2x" as a suffix to the images filenames.

Since image-url() throws back the whole path I can't append the suffix. Not I'm trying to access the Image-Path I've set in the config to patch the URL together by myself.

Like:

   background: $color url("#{$http_images_path}"+"#{$image-name}"+"@2x"+"#{$image-extension}") $x $y no-repeat

But #{$http_images_path} is undefined. Is there a way to access it? I don't really want to define the image-path seperatly since it would make the config quite unnecessary.

Even nicer would be if I could split the return of image-url() before the "." of the extension and add "@2x", because I wouldn't need to define the extension separately. I've tried to use Ruby in the sass file like puts "test" but it didn't work. So I'm not sure if theres a way to split strings with sass.

Do you guys have some good ideas?

Thanks!
Alex

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

○愚か者の日 2025-01-03 19:14:54

您可以在 image_url()

config.rb

images_dir = "images"
http_images_path = "/your/path"

screen.sass

$image-name: "asset"
$image-extension: ".png"

.class
  background-image: image_url($image-name + "@2x" + $image-extension)

screen.css

/* line 4, ../sass/screen.sass */
.class {
  background-image: url('/your/path/[email protected]?1327210853');
}

中连接您的图像名称。如果您想采用分割文件名并插入 @2x 的方式，你必须创建一个扩展，让 ruby 为你做这件事。您可以使用我的指南针扩展作为起点。

You can concatenate your image name inside image_url()

config.rb

images_dir = "images"
http_images_path = "/your/path"

screen.sass

$image-name: "asset"
$image-extension: ".png"

.class
  background-image: image_url($image-name + "@2x" + $image-extension)

screen.css

/* line 4, ../sass/screen.sass */
.class {
  background-image: url('/your/path/[email protected]?1327210853');
}

If you want to go the route of splitting the file name and inserting @2x, you'll have to create an extension where ruby does that for you. You could use my Compass extension as a starting point.

回复收藏 0 原文

~没有更多了~