Less 创建一个mixin，可以在更少的时间内添加一些内容

我正在尝试创建一个mixin，它可以在任何时候都在wordpress中创建与类别相关的颜色。不过，它不起作用。当我创建一个.category foo（#000000）{}行时，它要么不转换为.css，要么什么都不做。但是，当我将.category（…）{}更改为.category foo时，当它在主样式中声明为.category foo时，它仍然不起作用。 我现在在问，是否有可能创建这样一个混入更少，将允许我添加奖金变量取决于类别名称？比如a类（黑色）和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;}

---

}

看来你的目标仍然有两种可能

#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);

.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输出

.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;
}

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;
}

#2类特定混合CSS生成器 也许您不希望实际的类别类别作为父选择器，而只是希望根据特定类别名称生成代码（甚至可能让该名称本身就是一个类别）。如果是这样的话，类似于此嵌套mixin的东西将起作用：

更少

//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);

.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输出

.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;
}

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;
}

---

看来你的目标仍然有两种可能

#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);

.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输出

.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;
}

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;
}

#2类特定混合CSS生成器 也许您不希望实际的类别类别作为父选择器，而只是希望根据特定类别名称生成代码（甚至可能让该名称本身就是一个类别）。如果是这样的话，类似于此嵌套mixin的东西将起作用：

更少

//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);

.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输出

.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;
}

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;
}

---

你可以编辑你的帖子，并把一个小样本，确切地说，你希望你生成的css看起来像什么。如果您希望

.category-a

和

.category-b

作为其下嵌套选择器的父选择器，或者您只是将它们用作mixin名称来生成不同的代码，我有点不清楚。我想创建一个mixin，允许我在

-

符号后添加一个类别名称。我不知道是否有可能创建一些东西，让我可以做一些事情，比如

。category blue（#fff）{}。category red（#000）{}

只为这些类别设置样式，没有任何其他的父元素或子元素。你可以编辑你的帖子，并把一个小样本，你希望你生成的css是什么样子的。如果您希望

.category-a

和

.category-b

作为其下嵌套选择器的父选择器，或者您只是将它们用作mixin名称来生成不同的代码，我有点不清楚。我想创建一个mixin，允许我在

-

符号后添加一个类别名称。我不知道是否有可能创建一些东西来允许我做一些事情，比如

。category blue（#fff）{}。category red（#000）{}

来设置这些类别的样式，而不需要任何其他父元素或子元素。该死，这完全是我想要的。非常感谢。：）见鬼，这正是我想要的。非常感谢。：）