css – 使用命名空间编译Bootstrap 3中的问题

正如描述的七阶段最大值,当&被附加到嵌套选择器时,存在名称间距的问题.所以Bootstrap代码部分包含：

.caret {
  .btn-default & {
    border-top-color: @btn-default-color;
  }
  .btn-priMary &,.btn-success &,.btn-warning &,.btn-danger &,.btn-info & {
    border-top-color: #fff;
  }
}

回想一下&的所有实例被完全嵌套结构取代,所以当你按照它命名它时,你实际上有这个：

.namespace-bs {
  .caret {
    .btn-default & {
      border-top-color: @btn-default-color;
    }
    .btn-priMary &,.btn-info & {
      border-top-color: #fff;
    }
  }
}

完整的嵌套结构是.namespace .caret在&替换,这就是为什么你看到选择器看起来像.btn-priMary .namespace-bs .caret等.

四周工作少了1.4

以下应该有效：

>将LESS代码中的bootstrap正常编译到bootstrap.css文件中.这将解决所有LESS到“正常”bootstrap css代码,以及&无论在何处使用,都将按预期运行.
>然后在你的名字中间隔LESS文件,执行以下操作：

.namespace-bs {
    @import (less) "css/bootstrap.css";
}

我们正在做的是导入已编译的bootstrap.css文件(其中没有更多&值,因为它已完全编译),但是当我们导入它时,we are telling LESS to treat the CSS as LESS code by putting the (less) type casting in.所以现在,你的名字空间应该简单地附加到bootstrap.css文件中每个选择器的完整选择器字符串,你应该得到你想要的结果.