如何将LESS mixin插入到JavaScript代码中 [英] How to insert LESS mixin in to JavaScript code

问题描述

是否有任何选项可以在JS代码中插入一些LESS mixin？

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

我有这个border-radius mixin：

I have this border-radius mixin:

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

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

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);
});

推荐答案

您可以定义LESS mixins require：

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

这篇关于如何将LESS mixin插入到JavaScript代码中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！