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;
}

回答1:

(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";
}