如何將LESS mixin插入到JavaScript代碼中

是否有任何選項可以將一些LESS mixin插入到JS代碼中？如何將LESS mixin插入到JavaScript代碼中

我有這個邊界半徑混入：

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

那麼，有沒有可能在添加此混入到jQuery代碼？

var less = require('less'); 

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

來源

2013-05-02 Lukas

編號jQuery的'css（）'函數不包含LESS.js的渲染器。 – BenM 2013-05-02 11:22:46

也許是其他方式？ – Lukas 2013-05-02 11:37:11

你可以定義JavaScript相當於您所需要的LESS混入的：

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

來源

2013-05-02 11:54:52

我會使用這個解決方案，因爲它更簡單，編寫和編輯，thx – Lukas 2013-05-02 12:45:05

這不完全是你想要的，但也許這個技巧會有幫助。我沒有看到其他方式動態地使用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);

來源

2013-05-02 11:57:06 vadimrostok

如何將LESS mixin插入到JavaScript代碼中

回答

相關問題