"Calc" on a property is not working correctly

[AitorRodriguez990]

Hi there, I'm using gulp-less on a new proyect and I'm having problems using "calc".

My less file has:

width: ~"calc(100% - 720px)";

And the output on css files is:

width: calc(-620%);

Instead of:

width: calc(100% - 720px);

Thank you!

[yocontra]

Can you test this with the less command directly? If it outputs the same thing you need to open an issue on their repository, not here since we're just wrapping that library.

[AitorRodriguez990]

Thank you for the answer, @contra.

I don't understand what are you trying to tell me. I cleared my code to find the problem, but it works badly yet.

My code:

return gulp.src(files, { base: "Styles" })
        .pipe(less())
        .pipe(gulp.dest(bundlesPath))

So, do you think is a less problem? These less files are working correctly with Visual Studio's web-compiler plugin.

[yocontra]

@AitorRodriguez990

• Use the less module directly on your CSS to see if the output is the same.
• If the output is the same from gulp-less and less directly, the issue is with less and your issue will need to be opened there.
• If the output is different between gulp-less and less directly, the issue is with gulp-less and we will look into it.

You can use less directly by downloading and installing their command line tool: http://lesscss.org/

[yocontra]

You should also try running npm upgrade and npm which less to find the underlying version of less you have installed.

[AitorRodriguez990]

Thank you again, @contra

I did you told me. I think is a gulp-less problem because the output is different. For example, this lesscode:

.footer-apps {
  width: ~"calc(100% - 720px)";
}

Output with gulp-less:

.footer .footer-apps {
    width: calc(-620%);
}

Output with less directly (command line tool):

.footer .footer-apps {
  width: calc(100% - 720px);
}

My node version is 8.9.1 and less version is 3.8.0.

[mahish]

@AitorRodriguez990 Check this link: http://lesscss.org/usage/#less-options-math and play with different options, eg.:

…
.pipe(less({
  math: 'strict',
}))
…

[AitorRodriguez990]

@mahish I tried different options but nothing works. Same result always.

[AitorRodriguez990]

I did a great mistake and finally I have solved my problem.

I was using less module taking my css files, generated with another tool that we want to remove, instead of take less files... So was my fault.

I'm so sorry, I didn't want to waste your time.