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

还有别的办法吗？

Answer 1

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