LESS not working in WordPress [closed]

Question

How to run the CSS preprocessor (LESS) in WordPress?

I'm trying to apply LESS in my child theme. I create variable.less and place it in the child theme folder css/less/variable.less and I call this .less in my style.css like this @import "variable.less".

LESS is not working, I tried to call the js file for less in header and in the functions.php, but not of them are worked.

I checked the console, and there's an error ../css/less/variable.less 404 (Not Found). But the files is there.

I tried this in the header.php (child theme)

<link rel="stylesheet/less" href="/wp-content/themes/themename-child/css/less/variable.less" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>

I tried this also... but no luck

function css_less(){
    wp_register_script('less-js', get_template_directory_uri() . '/js/less.js');
        wp_enqueue_script('less-js');
    wp_register_style('less-css', get_template_directory_uri(). '/css/less/variable.less');
        wp_enqueue_style('less-css');
}
add_action('wp_enqueue_scripts', 'css_less');

style.css

.box-horizontal{ padding: 1em 2em 1em 2em; margin-top: -1em; text-align: center; border: 1px solid #CCC; box-shadow: @box-shadow; background: @bg-white; border-radius: 3px; }
.box-bg{ border: 1px solid #CCC; box-shadow: @box-shadow; background: #FFF; border-radius: 3px; text-align: center; }

Link: http://www.homecredit.ph/testEnvironment/mail-test/4830-2/

Answer 1

I agree with @Zlatev that you probably wouldn't want to do this clientside. There are easier ways to include less.

There are plugins that allow you to do this. Even jetpack has less support.

If your goal is to include this in your theme you can use wp-less.

Just download that plugin and drop in somewhere in your theme and include it in your functions.php like this:

require get_template_directory() . '/inc/wp-less/bootstrap-for-theme.php';

Then enqueue your less like normal css:

function mytheme_enqueue_less_css() {
    wp_enqueue_style('official_flowershop-theme-style', get_template_directory_uri().'/css/less/theme.less');
}   
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_less_css' );

The plugin has lots of extra features you can use (see full list here):

function mytheme_less_setup() {

    define('WP_LESS_COMPILATION', 'deep');
    $less = WPLessPlugin::getInstance();
    $less->dispatch();

    // do stuff with its API like:
    $less->addVariable('bg_primary', '#A0D4A4');
    $less->addVariable('bg_secondary', '#474747');
    $less->addVariable('bg_light', '#f5f5f5');
    $less->addVariable('bg_body', '#ffffff');

    if (get_theme_mod('officialtheme_bg_primary') != '' ) {
        $less_color = get_theme_mod("officialtheme_bg_primary");
        $less->addVariable("bg_primary", "$less_color");
    }

    if (get_theme_mod('officialtheme_bg_secondary') != '' ) {
        $less_color = get_theme_mod("officialtheme_bg_secondary");
        $less->addVariable("bg_secondary", "$less_color");
    }

    if (get_theme_mod('officialtheme_bg_light') != '' ) {
        $less_color = get_theme_mod("officialtheme_bg_light");
        $less->addVariable("bg_light", "$less_color");
    }

    if (get_theme_mod('officialtheme_bg_body') != '' ) {
        $less_color = get_theme_mod("officialtheme_bg_body");
        $less->addVariable("bg_body", "$less_color");
    } // WP Less initialize and add variables

}
add_action( 'after_setup_theme', 'mytheme_less_setup' );

Caution: While using less or sass/scss within a theme/plugin, as of now there aren't any available plugin solutions I'm aware of that let you prefix your css. To me this is a dealbreaker since I can do all of this on my computer with a program like Prepros or Codekit.

However, you can do this clientside if you want pretty easily with prefix-free although that's what we were previously trying to avoid so while it's easy, it's not necessarily a great solution.