Jasny-Bootstrap использует ".offcanvas-sm" в lessfile

Question

Я хотел бы использовать .offcanvas-sm который назначен <nav> элемент в файл Less. Файл Less выглядит так:

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

Проблема в том, что процессор Less говорит - класс offcanvas-sm не существует Это из этого " https://github.com/jasny/bootstrap/blob/master/less/offcanvas.less" файла Less, включенного в "jasny-bootstrap.less". Но как я могу импортировать этот код в класс?

Answer 1

Компилятор там правильный .offcanvas-sm не существует в контексте вы пытаетесь вызвать его. Ключевое слово здесь: Scope: селекторы, определенные в медиа-запросе, могут использоваться как миксин только в этом же блоке медиа-запроса.

Для этого конкретного случая extend сделает свое дело. Обработка области действия extend в некоторой степени ортогональны миксинам, поэтому селекторы, определенные в блоках медиазапроса, открыты для "расширения" из внешней области (но не наоборот):

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

Или просто:

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

}

---

all Ключевое слово необходимо в этом случае, так как .offcanvas-sm Стиль на самом деле представляет собой набор из двух наборов правил: .offcanvas-sm а также .offcanvas-sm.in