How to insert LESS mixin in to JavaScript code

Question

Is there any option to insert some LESS mixin in to JS code?

I have this border-radius mixin:

.border_radius(@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

So is there any possible to add this mixin in to jQuery code?

var less = require('less');

$('.circle').css({
    width: width, height: width,
    less.border_radius(10px);
});

No. jQuery's css() function does not include a renderer for LESS.js. — BenM
– BenM, Commented May 2, 2013 at 11:22

Vimal Stan · Accepted Answer · 2013-05-02 11:54:52Z

4

You could define the JavaScript equivalent of the LESS mixins you require:

HTML

<div class="circle"></div>

CSS

.circle { border: 1px solid #FF0000; }

jQuery

function border_radius(radius) {
  radius = radius || '5px';
  return {
    'border-radius': radius,
    '-moz-border-radius': radius,
    '-webkit-border-radius': radius
  }
}

var styles = border_radius(),
    width = '20px';
styles.width = width;
styles.height = width;

$('.circle').css(styles);

JSFiddle

answered May 2, 2013 at 11:54

Vimal Stan

2,0151 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lukas Over a year ago

i will use this solution because it is simpler and writing and editing, thx

vadimrostok · Accepted Answer · 2013-05-02 11:57:06Z

1

This is not exactly what you wanted, but maybe this trick would be helpful. I do not see other way to use less's functions dynamically.

var parser = new less.Parser({});
var lessCode = '';
function roundedCorners(_class, radius) {
    lessCode = '/* import dependent syles */'
        + '@import "PATH-TO-YOUR-MAIN-LESS-FILE";'
        + '.' + _class + ' {'
            + '.rounded-corners(' + radius + 'px);'
        + '}';
    parser.parse(lessCode, function (error, root) { 
        $('head').append($( '<style type="text/css">' + root.toCSS() + '</style>' )); 
    });
}
//try...
roundedCorners('circle', 10);

answered May 2, 2013 at 11:57

vadimrostok

1317 bronze badges

Collectives™ on Stack Overflow

How to insert LESS mixin in to JavaScript code

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related