L
L
Larisa2016-11-02 21:55:58
Less
Larisa, 2016-11-02 21:55:58

How to properly merge post in LESS for compact post in css?

We have an entry in the LESS file

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

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

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

I just can’t think of a solution for the most compact entry in both less and the output in css
. The output is
.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;
}

Thank you very much for the science

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Ankhena, 2016-11-04
@loratokareva

Perhaps this will help you: 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...

Z
zooks, 2016-11-03
@zooks

I can say that in SASS properties are automatically grouped, but not for this example.
So it's better to take care of minifying files.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question