混合较少的问题

Question

我试图(我认为)在LESS中做一个非常简单的混音,我不确定这里出了什么问题.

我正在使用Visual Studio Web Essentials进行编译.

所以这是我的目标:我想要一个类似于boostrap控件标签的样式,除了我想要改变一些属性(让我们说填充):

这是我的LESS:

@import (reference) 'bootstrap/bootstrap.less';
    .my-test-class {
      .control-label;
      padding: 4;
    }

这会导致编译错误:NameError:.control-label未定义.

我在这做错了什么？

Answer 1

据我所知,所有.control-label类定义都驻留在此文件中的其他类定义中.具体来说,在.form-inline和之内.form-horizontal.但是.form-inline它内部也是一个媒体查询,它目前阻止它作为mixin访问.

这意味着您必须通过唯一可用的命名空间访问它,如下所示:

@import (reference) 'bootstrap/bootstrap.less';

.my-test-class {
  .form-horizontal > .control-label;
  padding: 4;
}

从中学习的一般原则是真正需要了解引导代码实际输出的内容,以便能够访问(或知道您是否可以访问)它作为mixin的一部分(无论是否将其导入(reference)) .