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;
@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: myfunc(#F16);
    .f-border;
}

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

JavaScript

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

less.tree.functions.myfunc = function(str){
    console.log(str);
    return str;
    //return str.eval(str);
    //return new(tree.Anonymous)(str);
}



less.refreshStyles();

//console.log(less.tree);