LESSCSS - 使用计算和返回值

问题描述

H i，

希望你能帮忙。

只返回一个值 - 感觉我缺少一些非常明显的东西

说我有：

  @unit：em; 
 @basevalue：1; 
  

我可以用一些东西给我一个速记回报 -

  .someClass {padding：〜'@ {basevalue} @ {unit}'; } 
   

$ b

  .returnUnit（）{〜'@ {basevalue} @ {unit}'; } 
 
 .someClass {padding：returnUnit（）; } 
  

因为我最终希望的是： >

  .returnUnit（@val）{@ basevalue * @ val @ {unit}; } 
 .someClass {padding：returnUnit（0.5）; } 
  

---

使用混合我必须定义样式属性，但是此返回函数的值将用于许多不同的css属性。

---

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

---

更新为@Chococrocs ，感谢。

  .average（@x，@y）{
 @average：（（@x + @y）/ 2）; 
} 
 
 div {
 .average（16px，50px）; //callthe mixin 
 padding：@average; // use itsreturnvalue 
} 
  

• 喜欢我需要什么？ - 只要看到我是否可以随时在单位变量上标记它....
  

  ---

更新：获得一部分...

  .unitRelative（@val）{
 @ value：@ basevalue * @ val; 
 @relative：〜'@ {value} @ {unit}'; 
} 
 / * usage * / 
 
 .someClass {
 .unitRelative（2）; 
 padding：@relative; 
} 
  

但不是

  .someClass {
 .unitRelative（2）; 
 padding：@relative; 
 .unitRelative（3）; 
 margin：@relative; 
} 
  

有另一种方法吗？

解决方案

LESS还没有创建真正的函数，所以我们应对它。

第一

您可以，例如：

LESS

  .someClass {padding：unit（@basevalue，@unit）; } 
 .someOtherClass {padding：unit（@ basevalue * 0.5，@unit）; } 
  

CSS

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

第二

在某些情况下可以使用，但正如您所发现的，具有的限制>

$>

strong> LESS（first works right，second does not）

  .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！不是0.3em！ * / 
} 
  

第三

第二个方法的限制可以通过第二个包装来避免，因为它隔离了 .returnUnit（）返回的每个变量的范围，如下所示：

LESS

  .someAccurateClass {
 & {
 .returnUnit（0.4）; 
 padding：@return; 
} 
& {
 .returnUnit（0.3）; 
 margin：@return; 
} 
} 
  

CSS输出 p>

  .someAccurateClass {
 padding：0.4em; 
 margin：0.3em; / *是的！ * / 
} 
  

第四

通过添加一些全局变量并执行以下操作，可以更好地合并第一和第三个提示：

LESS

  @unit：em; 
 @basevalue：1; 
 @val：1; 
 @setUnit：unit（@ basevalue * @ val，@unit）; 
 
 .someAwesomeClass {
& {
 @val：.2; 
 padding：@setUnit; 
} 
& {
 @val：.1; 
 margin：@setUnit; 
} 
} 
  

CSS输出 p>

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

所以这里我们使用 c $ c>函数仍然是第一个想法，但是已经将其分配给变量 @setUnit ，因此每次调用变量时，它都运行该函数。我们仍然使用& {} 语法，就像第三个解决方案，但现在我们只是设置 @val 到我们想要的，并调用 @setUnit 我们想要的地方。

H i,

Hoping you can help.

Is there a way for LESS to return just a value - feel like I'm missing something very obvious

Say I have:

@unit:em;
@basevalue:1;

Can I use something to give me a shorthand return for -

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

Like say:

.returnUnit() { ~'@{basevalue}@{unit}'; }

.someClass {  padding: returnUnit(); }

because what I'm ultimately hoping for is:

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

---

Using a mixing I have to define the style property, however the value of this return function would be used for many different css properties.

---

Hope I made sense and I am just lacking deeper rtfm.

Many Thanks if you can.

---

Update as @Chococrocs pointer to the docs, thanks.

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

  ---

Update: That gets part way ...

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

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

But not when

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

Is there another way ?

解决方案

LESS has no way as of yet to create a true "function," so we cope with it.

First

You can just use the unit function, like so:

LESS

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

CSS

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

Second

The mixins as functions is okay in some situations, but as you discovered, has the limitation of only setting the value once on the first call (and that is assuming a variable of the same name does not exist in that scope already).

LESS (first works right, second doesn't)

.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 Output

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

Third

Limitation of the Second idea can be avoided by a second wrapping, as it isolates the scope for each variable returned by .returnUnit(), like so:

LESS

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

CSS Output

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

Fourth

It may be better to merge ideas from the First and Third by adding some global variables and doing this:

LESS

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

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

CSS Output

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

So here we are using the unit function still as the First idea, but have assigned it to the variable @setUnit, so each time the variable is called, it runs the function. We still isolate our property blocks using the & {} syntax like in the Third solution, but now we just set the @val to what we want and call the @setUnit where we want.

这篇关于LESSCSS - 使用计算和返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！