How to use a variable for image paths with less mixins


Tags: javascript,html,css3,less,retina-display

Problem :

I'm new to Less and I'm trying to use http://retinajs.com/ to load retina images when possible.

The script has this mixin to use when calling images in your css:

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: url(@at2x_path);
    background-size: @w @h;
  }  
}

My question, is if I'm using a variable for one of my images, how do I correctly use the variable to work in the mixin.

Doing something like this does not work:

  .at2x('@myImgPathVariable', 150px, 64px);

Nor does this:

  .at2x('("@{myImgPathVariable}/logo.png")', 150px, 64px);

Hope this makes sense, thanks.



Solution :

Luke and Om are both on to something. How your variable is declared could make a big difference. Doing it this way seemed to work for me:

@myImgPathVariable: ~'https://developers.google.com/images/developers-logo.png';

div {
    .at2x(@myImgPathVariable, 200px, 48px);
}

Full example: http://jsfiddle.net/jstam/yUtxp/


    CSS Howto..

    How to make div box actually touching the side of the browser as mine has a gap?

    How to Create 3 Column Layout with CSS Only?

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    How to use JavaScript to scale an image to fit

    How to Dynamically Fit image in screen using css

    How to use the Javascript to add/remove the CSS/colour style to the html page?

    How to override default CSS in modern GWT applications?

    How to enlarge footer on mobile only?

    CSS selector: how to style items [1-2][5-6][9-10] etc by pair

    how to animate a text in javafx using css?

    How to get CSS background images to show up in HTML files opened by Word?

    How to generate a PDF from an HTML / CSS (including images) source in Python? [closed]

    How to add css in django Updateview or Create view form

    how to align text input in Angular-Material tool bar?

    CSS question. How can I get blueprint css to work rails tabnav widget?

    How to fix clickable background with Wordpress theme and CSS

    How to dynamically allocate block of text using css?

    How can I display two images horizontally?

    How to do “display = block” using jquery for particular element

    How to activate a CSS animation only when hovering - without javascript

    JQuery - show/hide rows and manipulate css

    How to force an update of a css selector inside context?

    Background hover showing in CSS

    How to move the Google Chart's annotation to the top or anywhere with CSS?

    How to implement this in pure CSS?

    How To Set CSS Classes On HTML Tags Which Are Included In The Page With PHP Include's

    how to set !important on a multi value css transform?

    How can I pull Data from an SQL table using PHP inside an HTML

    How can I float a bunch of divs and still get overflow?

    How to resize the clockpicker?