Question

我仍然擅长使用Less CSS，但我无法找到问题的解决方案。我想要一个更有效的输出结果。

我有更少的代码：

.btn-trans {
      color: inherit;
      background-color: transparent;
      transition: all .4s;

      &.btn-default {
        color: @trans-default;
        &:hover {
          color: @trans-hover-color;
        }
      }

      &.btn-primary {
        color: @trans-primary;
        &:hover {
          color: @trans-hover-color;
        }
     }
  }

这是css输出：

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;
}

.btn-trans.btn-default {
  color: #bdbdbd;
}

.btn-trans.btn-default:hover {
  color: #f5f5f5;
}

.btn-trans.btn-primary {
  color: #738ffe;
}

.btn-trans.btn-primary:hover {
  color: #f5f5f5;
}

但我正在寻找的结果是：

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;
}

.btn-trans.btn-default {
  color: #bdbdbd;
}

.btn-trans.btn-primary {
  color: #738ffe;
}

.btn-trans.btn-default:hover,
.btn-trans.btn-primary:hover {
  color: #f5f5f5;
}

悬停类嵌套，因为颜色相同。

Answer 1

生成CSS完全没问题，只是它的文件大小要多两行。

如果您真的想要输出，可以试试这个：

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;

  &.btn-default {
    color: @trans-default;
  }

  &.btn-primary {
    color: @trans-primary;
  }

  &.btn-default,
  &.btn-primary {
    &:hover {
      color: @trans-hover-color;
    }
  }
}

Answer 2

你可以通过使用一个非常类似于你想要一起使用的选择器的类来实现这一点。

<强> Snipet

.custom-class(){
  .btn-trans.btn-default:hover,
    .btn-trans.btn-primary:hover {
    color: #f5f5f5;
    }
}/*-- end of the custom class --*/
.btn-trans {
      color: inherit;
      background-color: transparent;
      transition: all .4s;

      &.btn-default {
        color: #ccc;

        &:hover {
          color: #ccc;
        }
      }

      &.btn-primary {
        color: #ccc;

        &:hover {
          color: #ccc;
        }
     }
  }

/*-- use of the custom class --*/
.custom-class;

或者您可以通过在上一级进行分组来实现嵌套方法

<强> snipet

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;

  &.btn-default {
    color: #ccc;
  }

  &.btn-primary {
    color: #ccc;
  }

  &.btn-default,
  &.btn-primary {
    &:hover {
      color: #ccc;
    }
  }
}

Answer 3

使用此

    .btn-trans {
      color: inherit;
      background-color: transparent;
      transition: all .4s;
      &.btn-default {
        color: @color;
       }
     &.btn-primary {
       color: @color;
      }

     &.btn-default,
       &.btn-primary {
       &:hover {
       color: @color;
     }
   }
 }

混合使用更少的CSS

3 个答案: