html - 在 less css 中，有没有办法将选定的元素 ID 或类传递到混合中？

Question

.w(@w, @h){
    width: (@widget-w * @w) + (@widget_margin_right * @w);
    height: (@widget-h * @h) + (@widget_margin_bottom * @h);
} 
[class*='w_']{
    .w(1,1);
}

所以在这个中我有一个 html 元素，它有一个类来确定元素的宽度和高度。 像这样.... 这个 div 将是 @widget-w = 228px; @widget-h = 194px;

现在我是这样的 .w_1x1{ .w(1,1); } .w_2x1{ .w(2,1); } 但我希望它更自动化以随时适合我想要的任何尺寸 所以我正在尝试制作一个可以传递到类名中的混合来简化它。

Answer 1

我相信您必须使用 javascript/jquery 来做到这一点。 LESS 非常适合计算，但它是在页面布局之前编译的。

换句话说，除非在页面已经呈现并设置样式后运行编译的 CSS，否则它将无法动态拉取高度或宽度。

所以这是一个否定。

---

一些额外的信息:

LESS 是一个 CSS 预处理器，这意味着它旨在在浏览器在页面上加载任何内容之前进行处理。希望您使用编译器将 LESS 编译成 CSS，而不是编译客户端(不推荐)。