LESSCSS-使用计算和返回值

H i

希望你能帮忙

有没有办法让更少的只返回一个值-感觉我错过了一些非常明显的东西

假设我有：

@unit:em;
@basevalue:1;

我能用一些东西给我一个简短的报税表吗-

.someClass {  padding: ~'@{basevalue}@{unit}'; }

比如说：

因为我最终希望的是：

.returnUnit(@val) { @basevalue*@val@{unit}; }
.someClass {  padding:returnUnit(0.5); }

---

使用混合，我必须定义style属性，但是这个返回函数的值将用于许多不同的css属性

---

希望我有道理，我只是缺少更深层次的rtfm

如果可以的话，非常感谢

---

更新为@Chococrocs，谢谢

• 看来我需要什么只是看看我是否可以一直在它的单位变量上标记。。。。

  ---

更新：这是部分原因。。。 但不是什么时候

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

---

还有别的办法吗

我想你在寻找这个，作为一个函数混入

---

读了你的问题，我想这就是你的愿望；D

LESS目前还没有办法创建一个真正的“函数”，因此我们应对它

弗斯特 你可以这样做：

更少

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

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

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

@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);

.someAwesomeClass { 
    & {
        @val: .2; 
        padding: @setUnit;
    } 
    & {
        @val: .1; 
        margin: @setUnit;
    }
}

CSS

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

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

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

@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);

.someAwesomeClass { 
    & {
        @val: .2; 
        padding: @setUnit;
    } 
    & {
        @val: .1; 
        margin: @setUnit;
    }
}

第二 在某些情况下可以，但正如您所发现的，在第一次调用时仅设置一次值是有限制的（这是假设该范围中不存在同名的变量）

更少（第一个正确，第二个不正确）

CSS输出

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

.someThirdClass {
  padding: 0.4em;
}
.someOoopsClass {
  padding: 0.4em;
  margin: 0.4em; /* Ooops! Not 0.3em! */
}

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

.someAwesomeClass {
  padding: 0.2em;
  margin: 0.1em;
}

第三 第二个想法的限制可以通过第二个包装来避免，因为它隔离了

.returnUnit（）

返回的每个变量的作用域，如下所示：

更少

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

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

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

@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);

.someAwesomeClass { 
    & {
        @val: .2; 
        padding: @setUnit;
    } 
    & {
        @val: .1; 
        margin: @setUnit;
    }
}

CSS输出

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

.someThirdClass {
  padding: 0.4em;
}
.someOoopsClass {
  padding: 0.4em;
  margin: 0.4em; /* Ooops! Not 0.3em! */
}

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

.someAwesomeClass {
  padding: 0.2em;
  margin: 0.1em;
}

第四 最好通过添加一些全局变量并执行以下操作来合并第一个和第三个概念：

更少

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

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

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

@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);

.someAwesomeClass { 
    & {
        @val: .2; 
        padding: @setUnit;
    } 
    & {
        @val: .1; 
        margin: @setUnit;
    }
}

CSS输出

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

.someThirdClass {
  padding: 0.4em;
}
.someOoopsClass {
  padding: 0.4em;
  margin: 0.4em; /* Ooops! Not 0.3em! */
}

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

.someAwesomeClass {
  padding: 0.2em;
  margin: 0.1em;
}

---

因此，这里我们仍然使用

unit

函数作为第一个想法，但是已经将其分配给变量

@setUnit

，因此每次调用该变量时，它都会运行该函数。我们仍然像在第三个解决方案中一样使用

&{}

语法隔离属性块，但是现在我们只是将

@val

设置为我们想要的，并在我们想要的地方调用

@setUnit

。

fabienevain使用全局js函数提到了一个hack。如果您想要一个具有实际返回值的函数，这似乎是一个不错的选择

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

@arg: 8px;

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

用法：

.selector {
    .parseInt(100px);
    width: @parseInt + 10; // px will automatically be appended
}

结果:

.selector {
    width: 110px;
}

---

最简单的解决方法之一是传递属性和值

mixin.less

.lighter(@property, @color) {
  @{property}: multiply(white, fade(@color, 10%));
}

.my-class{
  .lighter(background-color, #FF0000);
}

使用.less

.lighter(@property, @color) {
  @{property}: multiply(white, fade(@color, 10%));
}

.my-class{
  .lighter(background-color, #FF0000);
}

结果:

.my-class{
  background-color: #fbe8eb;
}

---

我不确定是否可以用更少的时间来分离

@unit

和

@basevalue

。将它们组合成单个变量是否会影响您的设计？这样做似乎不会让你损失太多，因为任何时候你改变一个，你也需要改变另一个。谢谢@recursive。你可能是对的，我还可以说像-

10em*6

我刚才也添加了一个编辑，看起来像是正确的行-现在我正在尝试将它们像` padding:~'@{baseval}@{unit}'一样组合起来；但是如果更干燥的话会更整洁我个人会建议其中一个（其余的看起来都很臃肿）。谢谢@Chococroc我以前读过那页，把它添加到q中，并且有一个剧本……第四个是王牌！亲爱的，谢谢你的深入解释，这正是我想要的。很好地使用了

@val

这样来确定它的范围。这让我的头都歪了，怎么这么少使用变量：）谢谢。该死的，正因为如此，我才在工作中损失了1个多小时--他们真的应该，但关于“单位”的信息会被极化部分忽略。更好的是，他们应该首先将其添加到功能列表中！王牌我会试试看，+1谢谢-）我已经在你的答案中添加了链接中的代码）