CSS-Less класс расширяет класс псевдо-классом - PullRequest
Новая
       10

CSS-Less класс расширяет класс псевдо-классом

17 голосов
/ 06 февраля 2012

Мне было интересно, как я могу сделать что-то вроде следующего с меньшим количеством CSS: 

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo {
  .btn;
  &:hover {
    .btn:hover;
  }
}

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

Спасибо

Ответы [ 2 ]

31 голосов
/ 06 февраля 2012

ОБНОВЛЕНИЕ: Если вы не можете изменить внешние файлы, просто переопределите селекторы и добавьте отсутствующие состояния: 

.btn {
  // not adding anything here, won't affect existing style
  &:hover {
    // adding my own hover state for .btn
    background: yellow;
    ...
  }
}

// this will make your foo button appear as in external style
// and have the :hover state just as you defined it above
.btn-foo {
  .btn;
}

Лучше сейчас?:)

Вам не нужен псевдо-класс.Это будет просто работать:)

Попробуйте это: 

.btn {
  background: yellow;

  &:hover { // define hover state here
    background: green;
  }
}

button {
  .btn;
}

Каждый элемент <button class='btn'>, который вы создаете, унаследует все, что было определено, включая состояние наведения.Я думаю, что это одна из главных удивительных особенностей LESS.

Надеюсь, это поможет.

7 голосов
/ 04 мая 2013

In Less 1.4.0 (1.4.1?)

Это: 

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo:extend(.btn all) { 
}

Расширяется до этого: 

.btn,
.btn-foo {
  color: black;
}
.btn:hover,
.btn-foo:hover {
  color: white;
}

Будьте осторожны с этим:

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.abc .btn {
  margin: 2px;
}

.btn-foo:extend(.btn all) {

}

Выводит следующее: 

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.abc .btn {
  margin: 2px;
}

.btn-foo:extend(.btn all) {

}

Я не изучал SASS более получаса, но я считаю, что последним случаем является его поведение по умолчанию (или только) @extend..

...