混入更少的 CSS答案

【问题标题】：Mixing in Less CSS混入更少的 CSS
【发布时间】：2015-05-04 18:09:33
【问题描述】：

我还是个使用 Less CSS 的新手，我找不到解决问题的方法。我想要更高效的输出结果。

我在 less 中有这段代码：

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

由于颜色相同，因此嵌套了悬停类。

【问题讨论】：

我已经通过添加&.btn-default, .btn-primary {&:hover {color: @trans-hover-color;}}成功获得了想要的结果，如果有更好的方法，请告诉我。

标签： css less lesscss-resources

【解决方案1】：

您可以通过使用一个非常类似于将要使用的选择器组合在一起的类来实现这一点。

片段

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

或者您可以通过在上层分组来采用嵌套方法

片段

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

【讨论】：

【解决方案2】：

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

【讨论】：

我也做了同样的事情。还是非常感谢。 :)

【解决方案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;
     }
   }
 }

【讨论】：

这与已接受答案中的第二个 sn-p 有何不同（除了您刚才所做的 #ccc 到 @color 更改）？
对不起，我没有看到上面的答案。我收回我的答案。将其删除。