Question

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。

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

更新为@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还没有办法创造一个真正的＆＃34;功能，＆＃34;所以我们应付它。

第一

您可以use the unit function，就像这样：

<强> LESS

.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()返回的每个变量的范围，如下所示：

<强> LESS

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

CSS输出

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

四

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

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

Answer 2

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

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

@arg: 8px;

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

Answer 3

我认为你在寻找这个，Mixin作为一个功能

http://lesscss.org/features/#mixins-as-functions-feature

阅读你的问题，我认为是你所希望的，D

Answer 4

// mixin
.parseInt(@string) {
    @parseInt: unit(@string, );
}

用法：

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

结果：

.selector {
    width: 110px;
}

Answer 5

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

mixin.less

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

少用

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

结果：

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

LESSCSS - 使用计算和返回值

更新：这部分方式......

5 个答案:

第一

第二

第三

四