栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

具有名称空间的Bootstrap 3中的编译问题

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

具有名称空间的Bootstrap 3中的编译问题

您的问题详细

作为七相-MAX所描述的,存在与名称问题间隔“当

&
附加 到嵌套选择器”。因此,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-success &,    .btn-warning &,    .btn-danger &,    .btn-info & {      border-top-color: #fff;    }  }}

完全嵌套的结构就

.namespace .caret
&
替换的关键点,这就是为什么您看到选择器看起来像其他的原因
.btn-primary.namespace-bs .caret

为LESS 1.4+解决

以下应该工作:

  1. 将引导程序正常地从其LESS代码编译为

    bootstrap.css
    文件。这会将所有LESS解析为“常规”引导CSS代码,并且
    &
    无论使用什么地方,will都将按预期和期望的方式运行。

  2. 然后在您的名称间隔LESS文件中,执行以下操作:

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

我们正在执行的操作是导入已编译的

bootstrap.css
文件(由于已
&
完全编译,因此其中没有更多值),但是在导入文件时,我们要告诉LESS通过将
(less)
类型转换放入来将CSS视为LESS代码。因此,现在,您的名称空间应简单地将其自身附加到
bootstrap.css
文件中每个选择器的完整选择器字符串上,并最终获得所需的结果。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/465176.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号