bodhizero bodhizero - 3 months ago 24
Less Question

Import css file as a block-level import using less

Is there a way to nest the rules of a .css file under a selector by using

@import
like you can when importing a .less file?




If you have a file, "x.less"

#x {
color: #000;
}


and file "main.less"

.scope {
@import "x.less";
}


compiling "main.less" results in

.scope #x {
color: #000;
}





However, if you have
"y.css"

#y {
color: #111;
}


and change "main.less" to

.scope {
@import "y.css";
}


compiling "main.less" results in

.scope {
@import "y.css";
}





And if you have
"z.css"

#z {
color: #222;
}


and change "main.less" to

.scope {
@import (inline) "z.css";
}


compiling "main.less" results in

.scope {
#z {
color: #222;
}

Answer

(inline) just injects the imported file "as-is" w/o parsing it, so the result of such import inside a ruleset is undefined (invalid CSS like in your example). To get what you need use (less) option, e.g.:

.scope {
    @import (less) "z.css";
}