LESSCSS - 使用计算和返回值

Question

我,

希望你能提供帮助.

有没有办法让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 指向文档的指针,谢谢.

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

还有另外一种方法吗？

Answer 1

LESS还没有办法创造一个真正的"功能",所以我们应对它.

第一

您可以使用单位函数,如下所示:

减

.someClass {  padding: unit(@basevalue, @unit); }
.someOtherClass {  padding: unit(@basevalue*0.5, @unit); }

CSS

.someClass {
  padding: 1em;
}
.someOtherClass {
  padding: 0.5em;
}

第二

作为函数的mixins在某些情况下是可以的,但正如您所发现的那样,仅限于在第一次调用时设置一次值(并且假设已经在该范围内不存在同名变量).

少(第一次正常,第二次没有)

.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! */
}

第四

通过添加一些全局变量并执行以下操作来合并来自First和Third的想法可能更好:

减

@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,因此每次调用变量时,它都会运行该函数.我们仍然使用& {}第三种解决方案中的语法来隔离我们的属性块,但现在我们只需将其设置@val为我们想要的并调用@setUnit我们想要的位置.

Answer 2

这里是提到黑客在这里使用一个全球性的js函数由fabienevain.如果你想要一个具有实际返回值的函数,似乎是个不错的选择.

@fn: ~`fn = function(a) { return a; }`;

@arg: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}