PHPStorm: How do I setup LESS to output to CSS directory with file watcher?

I want to compile one less file from

sites/all/themes/bic/res/less/style.less to sites/all/themes/bic/res/css/style.css

Here's what I did

So the Arguments I used is: --no-color $FileName$ ../css/$FileNameWithoutExtension$.css

This will produce: /usr/local/bin/lessc --no-color blogs.less ../css/blogs.css at phpstorm console, and works fine.

I might miss something. Anyway, I tried both "--no-color $FileName$ $ProjectFileDir$/sites/all/themes/bic/res/css/$FileDirPathFromParent(less)$" and "--no-color $FileName$ $ProjectFileDir$/sites/all/themes/bic/res/css/$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css". Neither of them work for me. So just post my solution here, which might help some people who has the same trouble with me..

See my related answer for JADE file watcher, I believe it would be the same for LESS.

The trick is to use $FileDirPathFromParent(dir)$ macro:

$ProjectFileDir$/css/$FileDirPathFromParent(less)$ will produce /project/path/css/dir/ for a file located in /project/path/less/dir/ directory.