【问题标题】:Is there any possibility to build objects in Less?有没有可能在 Less 中构建对象?
【发布时间】:2021-10-27 23:55:08
【问题描述】:

目前我尝试以更少的成本构建 mixins,但它似乎比预期的要复杂。例如,我尝试构建一个 if 条件,我的标题如下所示:

.ifClauses(
   @checkParam,
   @conditions:{
    isnumber(@checkParam),
    ispercentage(@checkParam),
    ispixel(@checkParam)
   },
   @thens:{
    .first(){height:@checkParam * 1px;},
    .second(){height:@checkParam;},
    .third(){height:@checkParam;}
   }
)

我知道数组的定义如下:

@array: first,second,third;

.

也许我可以将其用作对象,也就是说,当参数用逗号分隔时,如何将数组写入 mixins 参数?

【问题讨论】:

  • 我不确定我是否完全理解你,但你可以使用 extract(@array, 1) 从逗号分隔的字符串中提取第一个值。
  • 这取决于你将如何使用这个“对象”。在一般情况下,混合/规则集(包括分离的)都可以解释为某种 OOP 类型和对象(在一定程度上)。但是对于您的特殊情况(模拟if 语句?)严格的“类对象”抽象并不是真正适合的。有关此类if 仿真的示例,请参阅:12 等。
  • 其余的取决于所有这些1st, 2nd, 3rd etc 应该是什么意思。换句话说,提供有关您的实际用例的更多详细信息可能是明智的,否则陷入 XY 问题的机会太高了。 ->
  • -> (由于 Less 不是一种脚本语言,当尝试使用来自脚本语言(例如 JavaScript)的非 Less-friendly 设计模式时,这是很常见的陷阱,因此必须模拟类似脚本行为,因此将各种 kludges 和解决方法堆叠在一起以解决问题,否则(并非总是但经常)更容易通过本机 Less(或通常情况下的“任何声明性”)设计模式来解决。)
  • 我当然知道 less 不是脚本语言。我只是希望有一个选项可以在参数中使用数组构建 mixins,或者如果这不起作用,则有任何函数可以让使用 less 的条件变得更容易。在您的帮助 cmets 之后,我认为没有其他更优雅的解决方案。谢谢 :)

标签: css less less-mixins


【解决方案1】:

我是这样解决的:

.height(@param: @_tablet_slider_-height){

      @active : false;

      & when(isnumber(@param)){
        height: @param * 1px;
        @active: true;
      }
      & when(isunit(@param)){
        height: @param;
        @active: true;
      }

      & when(ispixel(@param)){
        height: @param;
        @active: true;
      }

      & when(isem(@param)){
        height: @param;
        @active: true;
      }
      & when(ispercentage(@param)){
        height: @param;
        @active: true;
      }

      & when(@active = false){

        &:before{
          content:"Error in parsing less"
        }

      }  
}

【讨论】:

  • 其实代码有bug。规则集(包括& {})不会将它们的内容暴露给外部范围......因此,您使用& {} 设置的@active 变量不会对最后一个产生任何影响(因此它总是false 在那里)。 .. 您必须改用 mixins... 虽然考虑到还有其他方法可以简化整个事情:an example 你根本不需要任何 @active
  • 更多:对于这个特殊的 sn-p,我想知道您是否需要所有这些条件 根本 ;) 请注意 1 * 1px 将始终导致1px1anythingelse * 1px 也将始终导致1anythingelse (如果其中一个乘法操作数不是数字,Less 将自动抛出错误)。换句话说,“更好的解决方案”很简单:height: @whatever * 1px;根本不需要条件或混合! (现在你可以猜到我为什么每次都抱怨 XY 问题了 :)。
  • (Less 中也有很多复杂条件的用例 - a nice example - 但上面一个绝对不是其中之一)。
猜你喜欢
  • 2022-11-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多