Jasny-Bootstrap using ".offcanvas-sm" in lessfile

Question

I would like to use .offcanvas-sm which is assigned to an <nav> element into the Less file. The Less file looks like:

@import "../../jasny-bootstrap.less";
.test {
  .offcanvas-sm;
}

Problem is that the Less processor says - class offcanvas-sm doesn't exist. Its from this "https://github.com/jasny/bootstrap/blob/master/less/offcanvas.less" Less file included in "jasny-bootstrap.less". But how can I import this code to a class?

Answer 1

The compiler is correct there, indeed .offcanvas-sm does not exist in the context you try to invoke it. The key word here is Scope: selectors defined in a media query can be used as a mixin only within this same media query block.

For this particular case extend will do the trick. Scope handling of the extend is somewhat orthogonal to that of mixins, so selectors defined within media query blocks are open for "extending" from an outer scope (but not in opposite):

.test {
    &:extend(.offcanvas-sm all);
}

Or just:

.test:extend(.offcanvas-sm all) {

}

---

all keyword is necessary in this case since .offcanvas-sm style is actually a set of two rulesets: .offcanvas-sm and .offcanvas-sm.in