1

我正在尝试创建一个 mixin，它可以立即在 wordpress 中制作与类别相关的颜色。但是，它不起作用。当我尝试以我的风格创建 .category-foo(#000000){} 行时，它要么没有转换为 .css，要么什么都不做。但是，当我将 .category(...){} 更改为 .category-foo 时，它在主样式中声明为 .category-foo 时仍然不起作用。我现在在问，是否有可能在 LESS 中创建这样一个 mixin，允许我根据类别名称添加奖励变量？比如 .category-a（黑色）、.category-b（白色）。这对我来说真的是一种祝福。

.category(@catcolor : @white){
    h2{color: @catcolor;}
        a, .foo p, .foo a{color:@catcolor;
            &:hover,&:active{color:lighten(@catcolor, 10%);}
        }
        img{.transition(background-color 0.8s ease-out);
            &:hover,&:active{background-color:@catcolor;}
        }
        .featured-image{.transition(background-color 0.8s ease-out);
            &:hover,&:active{background-color:@catcolor;}
        }
        ::-moz-selection{background-color:@catcolor; color:@white;}
        ::selection{background-color:@catcolor; color:@white;}

}

4

1 回答 1

1

您的目标似乎仍然有两种可能性。

#1 父类别选择器

如果我正确理解您的评论，您希望能够将类别名称添加到选择器，该选择器还将根据该类别类设置其中的 css 样式。如果是这样，这是您示例的简化示例：

较少的

//mixin defined
.category(@catName: a, @catColor: white) {

  //add category name to selector
  .category-@{catName} {
    h2 {color: @catColor;}
    a, .bar p, .bar a{color:@catColor;
            &:hover,&:active{color:lighten(@catColor, 10%);}
        }
  }
}

//call it
.category(foo, blue);

CSS 输出

.category-foo h2 {
  color: #0000ff;
}
.category-foo a,
.category-foo .bar p,
.category-foo .bar a {
  color: #0000ff;
}
.category-foo a:hover,
.category-foo .bar p:hover,
.category-foo .bar a:hover,
.category-foo a:active,
.category-foo .bar p:active,
.category-foo .bar a:active {
  color: #3333ff;
}

#2 类别特定的 Mixin CSS 生成器

也许您不想要一个实际的类别类作为您的父选择器，而只是想根据特定的类别名称生成代码（甚至可能让该名称本身就是一个类）。如果是这样，像这样的嵌套 mixin 会起作用：

较少的

.category(@catName: a, @catColor: white) {

  //This is common code used by all categories
  //It has an example of using the category name to generate a class name
  .categoryCommonCode() {
    h2 {color: @catColor;}
    a, .@{catName} p, .@{catName}  a {color:@catColor;
            &:hover,&:active{color:lighten(@catColor, 10%);}
        }
  }

  //set up guarded mixins
  .category(foo) {
    .categoryCommonCode();
  .specialFooOnlyClass {color: darken(@catColor, 20%);}
  }

  .category(bar) {
    .categoryCommonCode();
    .specialBarOnlyClass {color: darken(@catColor, 50%);}
  }

  //Call the appropriate nested mixin
  .category(@catName);
}

//Call it
.category(foo, blue);

CSS 输出

h2 {
  color: #0000ff;
}
a,
.foo p,
.foo a {
  color: #0000ff;
}
a:hover,
.foo p:hover,
.foo a:hover,
a:active,
.foo p:active,
.foo a:active {
  color: #3333ff;
}
.specialFooOnlyClass {
  color: #000099;
}
于 2013-03-13T02:05:27.973 回答