1

我需要重复我的选择器。Less CSS 中有什么方法可以用函数/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 */}
4

1 回答 1

2

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

将规则集传递给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 演示

于 2014-09-23T04:03:04.263 回答