JSFiddle - React, Tailwind, and code Playground

by avrelian

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, 
        @style: solid,
        @color: #BE2
    ) {
    border: @width @style @color;
}

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

/* вызываем миксин c параметрами */
/* при этом изменяется только третий */
.extension {
    .f-border(4px, solid, #F16);
}

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

JavaScript

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