如何将LESS mixin插入JavaScript代码中

有没有选择在JS代码中插入一些LESS mixin？

我有这个border-radius mixin：

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

那么有没有可能将这个mixin添加到jQuery代码中？

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

Answer 1

您可以定义所需的LESS mixin的JavaScript等价物：

HTML

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

Answer 2

这不完全是你想要的，但也许这个技巧会有所帮助。 我没有看到动态使用less函数的其他方法。

 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($( '' )); }); } //try... roundedCorners('circle', 10);