少动态调用mixin

Question

你如何动态调用mixin？

用例可能是生成样式指南:

// The mixin which should be called
.typography-xs(){
  font-family: Arial;
  font-size: 16px;
  line-height: 22px;
}

// The mixin which tries to call typography-xs
.typography-demo(@typographyName, @mixinName) {
  @{typographyName} {
    &:before{content: '@{typographyName}';}
    // Calling the mixin dynamically
    @mixinName();
  }
}

// Example call of .typograhpy-demo
.typography-demo(xs, typography-xs);

这样一个动态调用是否可以用更少的CSS？

Answer 1

你现在不能动态地按你的意愿打电话.但是,您可以使用模式匹配稍微改变它,如下所示:

// The mixin which should be called
.typography(xs){
  font-family: Arial;
  font-size: 16px;
  line-height: 22px;
}

// The mixin which tries to call typography-xs
.typography-demo(@typographyName) {
  @{typographyName} {
    &:before{content: '@{typographyName}';}
    // Calling the mixin dynamically
    .typography(@typographyName);
  }
}

// Example call of .typograhpy-demo
.typography-demo(xs);

使用模式匹配,您可以创建其他模式,例如:

.typography(xl){
  font-family: Arial;
  font-size: 32px;
  line-height: 44px;
}

.typography(times){
  font-family: 'Times New Roman';
  font-size: 16px;
  line-height: 22px;
}

现在您可以调用模式xl或times让它生成代码.从本质上讲,取连字符后的任何内容(如你的-xs)来区分各种排版组,并删除连字符并使用该名称作为模式以匹配mixins.

另外,我会添加一个在选择之前放置选择器的方法,@{typographyName}所以:

.typography-demo(@typographyName, @selector: ~".") {
  @{selector}@{typographyName} {
    &:before{content: '@{typographyName}';}
    // Calling the mixin dynamically
    .typography(@typographyName);
  }
}

这种方式默认情况下会生成一个类,但可以将其设置为id或任何选择器字符串@{typographyName}.