loratokareva
@loratokareva
html верстальщик

Как корректно объединить запись в LESS для компактной записи в css?

Имеем в LESS файле запись

.breadcrumb {
  &.main,
  &.path {
     & a:hover {
      color: red;
    }
  }
}

.right-sidepanel {
    &-article,
    &-moreover {
      a {
        color: red;
      }
    }
  }

.left-sidepanel {
    .panel {
      &-heading,
      &-body a {
        color: red;
      }
    }
  }


Никак не могу придумать решение для максимально компактной записи и в less и на выходе в css

На выходе имеем

.breadcrumb.main a:hover,
.breadcrumb.path a:hover {
  color: red;
}
.right-sidepanel-article a,
.right-sidepanel-moreover a {
  color: red;
}
.left-sidepanel .panel-heading,
.left-sidepanel .panel-body a {
  color: red;
}

/*  Как исправить файл Less, чтобы на выходе была компактная запись вида   */

.breadcrumb.main a:hover,
.breadcrumb.path a:hover,
.right-sidepanel-article a,
.right-sidepanel-moreover a,
.left-sidepanel .panel-heading,
.left-sidepanel .panel-body a {
  color: red;
}


Большое спасибо за науку)
  • Вопрос задан
  • 180 просмотров
Решения вопроса 1
Ankhena
@Ankhena
Нежно люблю верстку
Наверное, Вам поможет вот это: websketches.ru/less/extend

.breadcrumb {
  &.main,
  &.path {
     & a:hover {
      color: red;
    }
  }
}

.right-sidepanel {
    &-article,
    &-moreover {
      a {
        &:extend(.breadcrumb.main a:hover);
      }
    }
  }

.left-sidepanel {
    .panel {
      &-heading,
      &-body a {
        &:extend(.breadcrumb.main a:hover);
      }
    }
  }


less2css.org/#%7B%22less%22%3A%22.breadcrumb%20%7B...
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
zooks
@zooks
Frontend
Могу сказать, что в SASS свойства автоматически группируются, но не для данного примера.
Так что лучше озаботиться минификацией файлов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы