如何在 cssLess 中添加 JQuery 命令

How can I add JQuery commands in cssLess?

本文关键字：添加 JQuery 命令 cssLess      更新时间：2023-09-26

我正在使用CSSLess和JQuery，并试图计算无序列表中LI元素的数量，以便我可以将该数字除以宽度。

ul.navBar {
    li {
        float: left;
        width: (100% / `$(".navBar li").length()`);
    }
}

输出应显示为并排选项卡，如标准导航栏菜单。

有没有办法在没有 JQuery 的情况下编写这个？

你想要这样做：

li { 
    float: left; 
    width: ~`(100/$('.navBar li').length)+'%'`;
}

~告诉less你不希望它弄乱输出。

您也可以使用percentage： 

width: percentage(`1/$('.navBar li').length`);

这仅在您没有边框、填充等会使您的li元素更宽的情况下才有效。 另外，你必须在body的底部加载它，否则jQuery将在DOM准备好之前运行：

<body>
  ...
  <link rel="stylesheet/less" type="text/css" href="mystyles.less"> 
  <script src="less.min.js" type="text/javascript"></script> 
</body>

演示：http://jsfiddle.net/jtbowden/ZJ2HV/

相关文章：