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

/* константы */
@f-border-width: 4px;
@f-border-style: solid;
@f-border-color: #BE2;

/* объявляем миксин */
/* параметры по-умолчанию - константы */
.f-border (
        @width: @f-border-width, 
        @style: @f-border-style,
        @color: @f-border-color
    ) {
    border: @width @style @color;
}

/* вызываем миксин без параметров */
.base-1 {
    .f-border;
}

/* изменяем константу только в области видимости */
/* вызываем миксин без параметров */
.extension {
    @f-border-color: #F16;
    .f-border;
}

/* вызываем миксин без параметров */
.base-2 {
    .f-border;
}

JavaScript

//////////////////////////////////////////////////////////////
//    Данный пример демонстрирует CSS скомпилированный из LESS
//////////////////////////////////////////////////////////////

// LESS парсит <STYLE> c типом 'text/less'
document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].type = 'text/less';

new(less.Parser)().parse(document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].innerHTML || '', function (e, tree) {
    var css = tree.toCSS();
    
    var cssWindow = window.open("", "Compiled Pure CSS", "status=1,width=350,height=150");
    cssWindow.document.write(css);
});