JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js"></script>
<div class="base-1">
    Это "BASE-1"
</div>

<div class="extension">
    Это "EXTENSION"
</div>

<div class="base-2">
    Это "BASE-2"
</div>

CSS

/* global variables */
@f-border-width: 59px;
@f-border-style: solid;
@f-border-color: #BE2;

/* default parameters - global variables */
.f-border (
        @width: @f-border-width, 
        @style: @f-border-style,
        @color: @f-border-color
    ) {
    border: @width @style @color;
}

/* using initial value of global variable "@f-border-color" */
.base-1 {
    .f-border;
}

/* changing global variable "@f-border-color" in the local scope */
.extension {
    @f-border-color: #F16;
    .f-border;
}

/* outside of the local scope of ".extension" */
/* global variable "@f-border-color" preserves its value */
.base-2 {
    .f-border;
}

JavaScript

// LESS parses <STYLE> with a type 'text/less'
document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].type = 'text/less';
less.refreshStyles();