0

Trying to achieve this proposal to make a div size based on its background image I'm using Less 2.5.1 compiled by Web Essentials 2013 for Update 4 version 2.5.4 and some functions do not resolve:

My Less File:

.myClass{
    height:image-height("myUrl.png"); //<-- Do not resolve
    width:percentage(1/2); //<--Resolves 
}

Resolved Css File:

.myClass{
        height:image-height("myUrl.png"); //Not good
        width:50%;   //Good
    }

I'm having this problem with image-height, image-width and image-size. Not with the rest of Misc Functions

There's no problem resolving the image by the compiler, because it's working fine when I used it like:

background-image:url("myUrl.png");

In the documentation there's a note for these methods saying:

Note: this function needs to be implemented by each environment. It is currently only available in the node environment.

In the WebEssentials documentation it says:

Web Essentials uses the node-less compiler and it always uses the latest version

And

NodeJS compilation - Web Essentials uses NodeJS to run the compiler. It's the fastest and most accurate compiler for LESS available.

I'm missing something that I don't know. What does that note mean? What should I do?

I've create a jsfiddle to share with you my goal.

Community
  • 1
  • 1
Mario Levrero
  • 3,345
  • 4
  • 26
  • 57
  • What environment do you have: OS, IDE? How do you "compile" your LESS files? Documentation says that it will work only in `node environment`. It seems that you use LESS not in node environment. – Vlad DX Jul 06 '15 at 13:40
  • Thanks @VladimirSerykh, I've updated the question referencing the compilation via WebEssentials. – Mario Levrero Jul 06 '15 at 14:03
  • Let's look at your task from another point of view. Why do you need to determine an image height in your CSS? May be there are another ways to do what you are trying to do? – Vlad DX Jul 06 '15 at 14:15
  • Ensure that the path of the file (i.e. "myUrl.png") can actually be resolved by the compiler. Notice that by default, `url` paths (incl. all these `url`-related functions) are relative to the master file and not current file, see [`--relative-urls`](http://lesscss.org/usage/#command-line-usage-relative-urls) for more details. If compiler can't find the file, the statement is left as is. – seven-phases-max Jul 06 '15 at 14:25
  • @VladimirSerykh I've updated my question with the reference to the goal, although I think it's out of scope. – Mario Levrero Jul 06 '15 at 14:35
  • @seven-phases-max I think it's resolved properly, I've update the question to notice it. – Mario Levrero Jul 06 '15 at 14:35
  • @MarioLevrero There is no real height value in their case (on link you provided). Why don't you use `height: 0;` as suggested? – Vlad DX Jul 06 '15 at 14:41
  • I think there will be better to solve you task with image not with LESS. Could you provide you code in a snippet or on jsfiddle? – Vlad DX Jul 06 '15 at 14:42
  • "working fine as `background-image:url("myUrl.png");`" is not yet enough (notice that this way the file is resolved by the browser relatively to the resulting css file, while `image-size` has to find image from within less file path...) Though there should be no difference if src less file and dst css file are in the same dir. – seven-phases-max Jul 06 '15 at 14:46
  • I've created a jsfiddle to share with you. – Mario Levrero Jul 06 '15 at 15:09

0 Answers0