Home/ Questions/Q 7129719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T11:16:21+00:00

I’m trying to write a @mixin for High Density Display like the iPhone 4+

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/asset@2x.png?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