Question

我需要重复我的选择器。有什么方法在Less CSS中使用function / mixin吗？

注意：框架内容不同。

.slide1{
  .frame{
     .obj1{}
     .obj2{}
     .obj3{}
  }
  [data-fragment=1].active ~ .frame {
     .obj1{}
     .obj2{}
     /* frame1 css */
  }

  [data-fragment=2].active ~ .frame {
     .obj2{}
     .obj3{}
     /* frame2 css */
  }
  /* other frames ... */
}
.slide2{
  /* slide2 css */
}
/* other slides ... */

到

.slide1{
  .frame{/* ... */}
  .frameselector(1){/* frame1 css */}
  .frameselector(2){/* frame2 css */}
}
.slide2{/* slide2 css */}

Answer 1

是的，您可以使用下面的mixin动态构建选择器。 mixin接受两个参数，其中一个是必须生成选择器的帧号，另一个是适用于该帧的规则集（规则集）。

Passing Rulesets to Mixins仅在Less v1.7.0中引入，因此此代码不适用于less编译器的较低版本。

注意：如果所有帧的属性/规则都有一些常见的部分，可以使用循环进一步减少，但由于它们不同，我们必须传递与每个帧相对应的规则集作为mixin电话。

<强>减：

.frameselector(@number, @ruleset){
    @sel: ~"[data-fragment = @{number}]";
    @{sel}.active ~ .frame{
        @ruleset();
    }
}
.slide1{
    .frame{
        /* some code */
    }
    .frameselector(1,{
        /* all rules or props belonging to frame 1 */
        color:red;
        background: beige;
    });
    .frameselector(2,{
        /* all rules or props belonging to frame 2 */
        color:green;
        background: white;
    });
}

已编译的CSS输出：

.slide1 .frame {
    /* some code */
}
.slide1 [data-fragment = 1].active ~ .frame {
    color: red;
    background: beige;
}
.slide1 [data-fragment = 2].active ~ .frame {
    color: green;
    background: white;
}

CodePen Demo

在Less选择器中使用function / mixin

1 个答案: