标签: less-mixins

任何建议如何根据参数存在创建条件mixin？例如,我需要验证是否传递了所有参数以执行某些操作,例如:

.margin (@margintop:0,@marginbottom:0,@marginright:0,@marginleft:0) {

  // if @marginright:0 or @marginleft:0 are passed do that...

  // else...

}

我有以下mixin:

.iconFont(@color: @green, @font-size: 18px){
  color: @color;
  font-size: @font-size;
}

如果我只想更改第二个变量值,我需要写第一个变量默认值吗？

h1{
 .iconFont(@green, 14px);
}

我试图在值小于和大于时设置属性，以设置要应用的属性的窗口。

例子：

.mixin (@colorVal) when (lightness(@colorVal) > 75%) {color:red;}
.mixin (@colorVal) when (lightness(@colorVal) > 25%) {color:green;}
.mixin (@colorVal) when (lightness(@colorVal) <= 75%) {color:green;}
.mixin (@colorVal) when (lightness(@colorVal) <= 25%) {color:blue;}

我不太明白如何组合守卫。在上面的示例中，亮度为 20% 的颜色将同时应用第三个和第四个防护。所以它会编译一种绿色和蓝色的颜色。由于顺序，这在技术上可以正确呈现，但仍然有点混乱......

任何替代解决方案？谢谢！

我需要在页面上添加一个图标,具体取决于其内容.换句话说,如果页面包含图像,图库,视频......我将添加一个指示其性质的图标.

为此,我将CSS类添加到body标记并使用后代选择器将图标添加到正确的位置.

显然这个任务导致CSS中有很多重复的代码,所以我想用LESS循环生成它.

这是我的实际尝试(图标是图标字体):

@icons:"\e926", "\e90e", "\e914";

.icons-loop(@i; @ico) when (@i <= length(@ico)) {

  @page-type:extract(@ico, @i);

  .page-type_@{page-type}
  {
      #icon_container:before
      {
        content: extract(@icons, @i);
      }
  }

  .icons-loop((@i + 1), @ico);
}

.icons(@ico...) {
  .icons-loop(1, @ico);
}

.icons(image, gallery, video);

我写了这个,汲取灵感来自像其他类似的问题,这.

它有效,但我承认这还不是我真正想要的,原因有两个:

• 我认为由于异构类型,当前需要一个变量@icons来声明图标实体,而一个mixins .icons来声明不同的页面类型并不那么直观.为了保持一致性,能够在两个声明中使用LESS变量应该更好
• 编写一种关联数组肯定会更好,我可以在同一个地方声明页面类型和相对图标之间的对应关系.像这样的东西:

@page-type: image, "\e926"; gallery, "\e90e"; video, "\e914";

有任何想法吗？