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

当我使用Crunch / WinLESS编译Bootstrap 3时,知道为什么某些样式会破坏.我正在使用此代码命名空间引导程序.

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

对于大多数样式而言,它的效果很好但有一些结果如下：

.btn-primary .namespace-bs .caret,.btn-success .namespace-bs .caret,.btn-warning .namespace-bs .caret,.btn-danger .namespace-bs .caret,.btn-info .namespace-bs .caret{border-top-color:#fff;}

我希望它们是这样的：

.namespace-bs .btn-primary .caret,.namespace-bs .btn-success .caret,.namespace-bs .btn-warning .caret,.namespace-bs .btn-danger .caret,.namespace-bs .btn-info .caret{border-top-color:#fff;}

我的编译器或LESS代码中的错误是否有问题？

谢谢

解决方法

你的问题详细

正如描述的七阶段最大值,当&被附加到嵌套选择器时,存在名称间距的问题.所以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文件中每个选择器的完整选择器字符串,你应该得到你想要的结果.

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

解决方法

猜你在找的CSS相关文章