不太重要的混合

Question

我有一个混合，以便生成一些这样的实用程序类：

.margin(@name, @size){
  .@{name} {margin: (@size)px;}
  @media (max-width: 767px) {
    .xs-@{name} {margin: (@size)px;}
  }
}

它工作正常，但是当我打电话时 .margin(m-n, 0) !important;

生成的 css 是 ：

.m-n {
  margin: 0 !important;
}
@media (max-width: 767px) {
  .xs-m-n {
    margin: 0;
   }
}

但我想有：

.m-n {
  margin: 0 !important;
}
@media (max-width: 767px) {
  .xs-m-n {
    margin: 0 !important;
   }
}

知道吗？

Answer 1

这是一个与补充参数一起使用的解决方案

.margin(@name, @size, @important: false){
    .@{name} when (@important = false){
        margin: (@size)px; 
    }
    .@{name}   when (@important = true) {
        margin: (@size)px !important; 
    }
    @media (max-width: 767px) {
        .xs-@{name} when (@important = false) {
            margin: (@size)px;
        }
        .xs-@{name}  when (@important = true) {
            margin: (@size)px !important;
        }
    }
}

然后，您只需拨打.margin(m-n, 0)或.margin(m-n, 0, true)