你好,
希望你能帮上忙。
有没有办法让 LESS 只返回一个值 - 感觉我遗漏了一些非常明显的东西
假设我有:
@unit:em;
@basevalue:1;
我可以用一些东西给我速记返回吗-
.someClass { padding: ~'@{basevalue}@{unit}'; }
就像说:
.returnUnit() { ~'@{basevalue}@{unit}'; }
.someClass { padding: returnUnit(); }
因为我最终希望的是:
.returnUnit(@val) { @basevalue*@val@{unit}; }
.someClass { padding:returnUnit(0.5); }
使用混合我必须定义样式属性,但是这个返回函数的值将用于许多不同的 css 属性。
希望我说得有道理,我只是缺乏更深入的 rtfm。
非常感谢。
更新为@Chococrocs pointer to the docs ,谢谢。
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
- 看起来像我需要的? - 只是看看我是否总能在单位变量上标记它....
更新:这部分...
.unitRelative(@val) {
@value : @basevalue*@val;
@relative: ~'@{value}@{unit}';
}
/* usage */
.someClass {
.unitRelative(2);
padding: @relative;
}
但不是什么时候
.someClass {
.unitRelative(2);
padding:@relative;
.unitRelative(3);
margin:@relative;
}
还有别的办法吗?
最佳答案
LESS 目前还没有办法创建一个真正的“函数”,所以我们只能应付它。
首先
你可以 use the unit function ,像这样:
少
.someClass { padding: unit(@basevalue, @unit); }
.someOtherClass { padding: unit(@basevalue*0.5, @unit); }
CSS
.someClass {
padding: 1em;
}
.someOtherClass {
padding: 0.5em;
}
第二
mixins as functions在某些情况下没问题,但正如您发现的那样,在第一次调用时仅设置一次值的限制(并且假设该范围内已经不存在同名变量) .
LESS(第一个正确,第二个不正确)
.returnUnit(@val:1) {
@return: unit(@basevalue*@val, @unit);
}
.someThirdClass {
.returnUnit(0.4);
padding: @return;
}
.someOoopsClass {
.returnUnit(0.4);
padding: @return;
.returnUnit(0.3);
margin: @return;
}
CSS 输出
.someThirdClass {
padding: 0.4em;
}
.someOoopsClass {
padding: 0.4em;
margin: 0.4em; /* Ooops! Not 0.3em! */
}
第三
第二个想法的限制可以通过第二次包装来避免,因为它隔离了 .returnUnit()
返回的每个变量的范围,如下所示:
少
.someAccurateClass {
& {
.returnUnit(0.4);
padding: @return;
}
& {
.returnUnit(0.3);
margin: @return;
}
}
CSS 输出
.someAccurateClass {
padding: 0.4em;
margin: 0.3em; /* Yes! */
}
第四名
通过添加一些全局变量并执行以下操作,合并第一和第三的想法可能会更好:
少
@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);
.someAwesomeClass {
& {
@val: .2;
padding: @setUnit;
}
& {
@val: .1;
margin: @setUnit;
}
}
CSS 输出
.someAwesomeClass {
padding: 0.2em;
margin: 0.1em;
}
所以这里我们仍然使用 unit
函数作为第一个想法,但是已经将它分配给变量 @setUnit
,所以每次调用变量时,它运行函数。我们仍然像第三种解决方案一样使用 & {}
语法隔离我们的属性 block ,但现在我们只是将 @val
设置为我们想要的并调用 @setUnit
我们想要的地方。
关于css - LESSCSS - 使用计算和返回值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22794231/