9

你好，

希望你能提供帮助。

有没有办法让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指针，谢谢。

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

还有其他方法吗？

4

5 回答 5

13

LESS 还没有办法创建一个真正的“功能”，所以我们应对它。

第一的

您可以只使用 unit 函数，如下所示：

较少的

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

CSS

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

第二

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

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

于 2014-04-01T19:48:11.650 回答
6

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

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

@arg: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}
于 2015-03-02T23:22:36.867 回答
3

我想你会找这个，Mixin as a function

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

阅读您的问题，我认为这就是您所希望的，;D

于 2014-04-01T18:48:26.490 回答
1 
// mixin
.parseInt(@string) {
    @parseInt: unit(@string, );
}

用法：

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

结果：

.selector {
    width: 110px;
}
于 2016-03-19T08:28:35.887 回答
0

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

mixin.less

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

无用

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

结果：

.my-class{
  background-color: #fbe8eb;
}
于 2019-06-02T08:07:19.297 回答