WP-Less, Less and PhpStorm compile

Question

Im creating wp theme using Redux framework, WP-Less for compiling styles in LESS. Working in PhpStorm.

Now, i want to change some colors dynamically from Redux and pass them to my main style.less file which will be compiled in style.css.

The problem is, when i want to load my css, i NEED to do it using

wp_enqueue_style('my-style', get_stylesheet_uri());

but it only loads css, not my less file. In my functions.php file i have defined my variables.

add_filter('less_vars', 'my_less_vars', 10, 2);

function my_less_vars($vars, $handle) {

Redux::init('redux_qmakeup');

global $redux_qmakeup;
if (isset($redux_qmakeup['opt-typography']['font-family'])) {
    $font_name = $redux_qmakeup['opt-typography']['font-family'];
} else {
    $font_name = 'Montserrat';
}
if (isset($redux_qmakeup['opt-typography']['color'])) {
    $font_color = $redux_qmakeup['opt-typography']['color'];
} else {
    $font_color = '#d6451e';
}
if (isset($redux_qmakeup['opt-color-footer'])) {
    $footer_color = $redux_qmakeup['opt-color-footer'];
} else {
    $footer_color = '#414243';
}

// $handle is a reference to the handle used with wp_enqueue_style()
$vars["font-family"] = "'$font_name'";
$vars["font-color"] = "$font_color";

$vars["footer-color"] = "$footer_color";

return $vars; }

In WP-LESS documentation it says that now i can use @footer-color in my .less file and PhpStorm will compile it automatically. But it wont, compiling is broken because my @footer-color is not defined. And if i define it as a empty var, it wont take my redux color but will keep that empty var.

AleksandarPredic AleksandarPredic · Accepted Answer · 2016-10-12T14:36:08

You are using WordPress filter add_filter('less_vars', 'my_less_vars', 10, 2); to add your less variables.

I'm using Netbeans and I'm sure it is the same in PhpStorm. Netbeans compiler can't use WP filters, simple as that. You can't use PhpStorm compiler to compile unless all vars are in written in the less files.

One solution is to compile file using WP-LESS only when you have some changes in less files or variables (which will be changed after you change some theme option related to it).

Hope this helps :)

WP-Less, Less and PhpStorm compile

1 Answers