css - 如何使用 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 时，它说它未定义。为什么会这样？

如果我将 .span2 添加为 html 中的一个类，这将起作用，但在导入 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 下(如果它在命名空间下)然后相应地进行调整。

例子

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

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

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