0

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/

closed as off-topic by Mark Kaplun, Howdy_McGee, kaiser Apr 7 '16 at 20:58

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions that are too localized (such as syntax errors, code with restricted access, hacked sites, hosting or support issues) are not in scope. See how do I ask a good question?" – Mark Kaplun, Howdy_McGee, kaiser
If this question can be reworded to fit the rules in the help center, please edit the question.

  • you need to fix your @import path – Jevuska Apr 7 '16 at 3:44
  • "not working" is not a question, it is a state. Please be specific about what you expect to happen that do not happen and describe as much of the relevant debuging effort as possible so people will not ask you about things you already tried. – Mark Kaplun Apr 7 '16 at 3:45
  • And for enqueue script use get_stylesheet_directory_uri if you in child theme. – Jevuska Apr 7 '16 at 3:50
  • @Jevuska still not working :( – User014019 Apr 7 '16 at 3:57
  • well, if you get 404 then either the file is not there, or you have problem with your server configuration – Mark Kaplun Apr 7 '16 at 4:03
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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.