如何在LESS文件之间导入变量 - 当前变为'undefined'

Question

嘿，我对bootstrap相对较新，我正在尝试将bootstraps响应css导入到我的style.less文件中。

即

@import "css/bootstrap-responsive.css"; 

我正在应用以下

#menu, #sub-menu {
.span2;
color: @bodydarker1;
height: 100%;
min-height: 100%;
padding: 1%;
}

并且.span2;出现在bootstrap-responsive.css中，但是当我检查页面时它给我的消息..

    .span2 is undefined
in style.less on line 26, column 2:

现在，如果我在bootstrap-responsive.css中将颜色红色应用于正文，那么它会渲染得很好，但是当我在类.span2中调用时，它会说它未定义。为什么会这样？

如果我在html中添加.span2作为一个类，但在less文档中导入时不应用id。

Answer 1

确保导入.less文件而不是.css。您可以导入.css，我只建议您始终使用.less文件。导入.css而不是.less。时可能会遇到很多问题。

看起来你的.LESS代码结构有点不正确。尝试替换它：

#menu, #sub-menu {
.span2;
color: @bodydarker1;
height: 100%;
min-height: 100%;
padding: 1%;
}

用这个：

#menu, 
#sub-menu {
    .span2 {
        color: @bodydarker1;
        height: 100%;
        min-height: 100%;
        padding: 1%;
    }
}

修改

如果您尝试在自定义#menu id下访问.span2，那么您必须查看引导程序中的namespace（如果它位于命名空间下），然后进行相应调整。

实施例

#bootstrap {
    #lists {
        .span2 {
            // some span2 stuff
        }
    }
}

#menu, 
#sub-menu {
    #bootstrap > #lists > .span2;

    color: @bodydarker1;
    height: 100%;
    min-height: 100%;
    padding: 1%;
}