Here is a function that can be called to dynamically apply a LESS.js stylesheet to the DOM after the page has finished loading. The following code snippet uses jQuery for convenience.

 function loadLESS ( filename ) {
    // If LESS isn't available, do nothing
    if ( !window.less ) { return;}

    // Create LESS link and add to <head>
    var $link = $("<link type='text/css' rel='stylesheet/less' />");
    $link.attr("href", filename + ".less");
    $("head").append( $link );

    // Notify LESS that there is a new stylesheet
    less.sheets.push( $link[0] );
    less.refresh();
}

The important parts are after applying the new link tag to the head section, the raw DOM node $link[0] must be added to the less.sheets array and then refresh called to apply the changes to the web page.

Also remember that the rel attribute for the link tag must be set to "stylesheet/less" rather than just "stylesheet".