1

Hey I'm relatively new to bootstrap and am trying to import bootstraps responsive css into my style.less file.

i.e 

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

I'm then applying the following

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

And .span2; appears in bootstrap-responsive.css but when i check the pages its giving me the message..

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

Now if I applied the colour red to the body in bootstrap-responsive.css it would render that fine but when I call in the class .span2 its saying that its undefined. Why would that be?

If I add .span2 as a class in the html that will work, but applying to an id when imported on the less document won't.

4

1 に答える 1

2

Make sure to import the .less file rather then the .css. You can import .css, I'd only recommend always working from .less files. You may run into a lot more issues while importing the .css rather than the .less.

It looks like your .LESS code structure is just a tad incorrect. Try replacing this:

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

with this:

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

edit:

If you're trying to access .span2 under your custom #menu id then you'll have to see what namespace it's under in the bootstrap (if it's under a namespace) and then adjust accordingly.

Example

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

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

    color: @bodydarker1;
    height: 100%;
    min-height: 100%;
    padding: 1%;
}
于 2013-03-11T17:25:06.887 に答える