Question

所以...我正在创建一个小型引导程序，我希望它能有效地完成，所以我选择了LESS来为我做一些工作。我发现LESS编译器在类的编写时会在类之间放置空格：

div.cb {
  input[type="text"] {
    border: 1px #d9d9d9 solid;
    height: 15px;
    padding: 5px;

    .large {
      width: 250px;
    }

    .medium {
      width: 150px;
    }

    .small {
      width: 50px;
    }

    .fill {
      width: 100%;
    }
  }
}

结果：

div.cb input[type="text"] {
  border: 1px #d9d9d9 solid;
  height: 15px;
  padding: 5px;
}
div.cb input[type="text"] .large {
  width: 250px;
}
div.cb input[type="text"] .medium {
  width: 150px;
}
div.cb input[type="text"] .small {
  width: 50px;
}
div.cb input[type="text"] .fill {
  width: 100%;
}

并且元素和类之间的差距会阻止我的浏览器（chrome）正确处理。有没有办法在LESS中拥有相同或相似的代码并正确输出CSS？没有这些差距......

Answer 1

使用less可以使用&

引用代码块的父代

所以这个：

.class
{
    .anotherClass 
    { 
        background: red; 
    }
}

编译为：

.class .anotherClass { background: red; }

鉴于此：

.class
{
    &.anotherClass 
    { 
        background: red; 
    }
}

编译到：

.class.anotherClass { background: red; }

我希望能明显区别

LESS将空格放在错误的地方

1 个答案: