LESSCSS - 使用计算和返回值

H i,

希望你能帮忙。

有没有办法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。

如果可以的话，非常感谢。

Update作为@Chococrocs指向文档的指针， 谢谢。

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

• Looks like what I need ? - just seeing if I can always tag on the unit variable to it....

  ---

更新：这已经部分了......

.unitRelative(@val) {
  @value : @basevalue*@val;
  @relative: ~'@{value}@{unit}';
}
/* usage */

 .someClass { 
  .unitRelative(2);
  padding: @relative;
}

但不是当

.someClass {
    .unitRelative(2);
    padding:@relative;
    .unitRelative(3);
    margin:@relative;
}

还有别的办法吗？

LESS 目前还没有办法创建真正的“函数”，所以我们应对它。

First

你可以只使用单位函数，像这样：

LESS

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

CSS

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

Second

The mixin 作为函数在某些情况下是可以的，但正如您发现的，有以下限制仅设置该值一次在第一次调用时（假设该范围内不存在同名变量）。

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

Third

第二个想法的限制可以通过第二次包装来避免，因为它隔离了返回的每个变量的范围.returnUnit()，像这样：

LESS

.someAccurateClass { 
    & {
        .returnUnit(0.4); 
        padding: @return;
    } 
    & { 
        .returnUnit(0.3); 
        margin: @return;
    }
}

CSS输出

.someAccurateClass {
  padding: 0.4em;
  margin: 0.3em; /* Yes! */
}

Fourth

通过添加一些全局变量并执行以下操作来合并第一和第三的想法可能会更好：

LESS

@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我们想要的地方。