javascript - 如何在 JavaScript 代码中插入 LESS 混合

Question

是否有任何选项可以在 JS 代码中插入一些 LESS 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

<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

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($( '<style type="text/css">' + root.toCSS() + '</style>' )); 
    });
}
//try...
roundedCorners('circle', 10);