Run Less in jsFiddle

by Michael Barros

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/4.2.0/less.min.js"></script>
<a href="http://lesscss.org/">
    <div class="somediv", id="test-div">
        Less!
    </div>
</a>

CSS

// Less can go here

// Implementation

@primary-color: #369;
@color: #3498db;
// @primary-color: red;

body { 
    background: @primary-color; 
    padding: 30px; 
}

.somediv {
    background: #fff;
    padding: 15px;
    
    border-radius: 10px;
    .box-shadow(2px, 2px, 6px, 0.33);
    .gradient(top, #fff, #e4e4e4);
}

a {
    font: bold 133% "arial", sans-serif;
    text-decoration: none;
    color: @primary-color;
    &:hover {color: spin(@primary-color, -45)} 
}

// Mixins
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}

.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(@origin, @start, @stop);
    background-image: -ms-linear-gradient(@origin, @start, @stop);
    background-image: linear-gradient(@origin, @start, @stop);
}
 
#header {
    background-color: @color;

    &:hover {
        // Inline JavaScript using backticks
        @message: `console.log("Hovered over the header!");`;

        &:before {
            content: @message;
        }
    }
}

JavaScript

console.clear();

(async function () {
    function createCollapsed(title, msg) {
        console.groupCollapsed(`*** ${title} ***`);

        console.log(msg);

        console.groupEnd();
    }

    /*
        jsFiddle does not directly support Less so we need these bits of code to bring it here.
    
        Twitter: @aaronlayton
        Modified by meri
        Updated by max
    */

    // Step 1: Select the style element and change it to text/less
    let styleElements = $('head style[type="text/css"]');

    createCollapsed('Before', styleElements[0].outerHTML);

    // console.debug('styleElements:', styleElements);

    // $('head style[type="text/css"]').attr('type','text/less');
    styleElements.attr('type', 'text/less');
    styleElements.attr('data-env', 'development');
    styleElements.attr('javascript-enabled', 'true');

    less.options.javascriptEnabled = true;

    createCollapsed('After', styleElements[0].outerHTML);

    /*
    
    // Step 2: Set development mode to see errors
    less.env = 'development';
    
     */

    console.log('less:           ', less);
    console.log('less:           ', getObjProps(less));
    console.log('less.javascript:', less.javascript());
    console.log('less.options:   ', less.options);

    // Step 3: Tell Less to refresh the styles
    less.refreshStyles();

    createCollapsed('After.2', styleElements[0].outerHTML);

    let lessSrc = /* less */`// Less can go here

// Implementation

@primary-color: #369;
@color: #3498db;
// @primary-color: red;

body {
    background: @primary-color;
    padding: 30px;
}

.somediv {
    background: #fff;
    padding: 15px;

    border-radius: 10px;
    .box-shadow(2px, 2px, 6px, 0.33);
    .gradient(top, #fff, #e4e4e4);
}

a {
    font: bold 133% "arial", sans-serif;
    text-decoration: none;
    color: @primary-color;
    &:hover {color: spin(@primary-color, -45)}
}

// Mixins
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y...