CSS-Mniej klasa rozszerzyć klasę z klasą pseudo

Question

Zastanawiałem się, w jaki sposób mogę zrobić coś jak następuje przy mniejszym CSS:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

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

Of-oczywiście jest to tylko przykład, co trzeba podkreślić jest tam, jeśli jest jakikolwiek sposób na rozszerzenie pseudoklasy w celu uniknięcia ponownego wpisania właściwości pseudo klasy wszędzie tam, gdzie ich potrzebuję. Wiem, że mógłbym stworzyć mixin, ale zastanawiam się, czy mógłbym tego uniknąć.

Dzięki

Answer 1

UPDATE: Jeśli nie można modyfikować pliki zewnętrzne prostu przedefiniować selektorów i dodać brakujące stany:

.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; 
} 

teraz lepiej? :)

---

Nie potrzebujesz pseudo-klasy. To po prostu działa :)

Spróbuj tego:

.btn { 
    background: yellow; 

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

button { 
    .btn; 
} 

Każdy elementem tworzenia odziedziczy cokolwiek zostało zdefiniowane, w tym stanie hover. Myślę, że to jedna z głównych niesamowitych cech LESS.

Mam nadzieję, że to pomoże.

Answer 2

W Less 1.4.0

To (1.4.1):

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

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

Rozszerza to:

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

Bądź ostrożny, choć to:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.abc .btn { 
    margin: 2px; 
} 

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

} 

Wyjdzie z tego:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.abc .btn { 
    margin: 2px; 
} 

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

} 

Nie zajrzałem do SASS dłużej niż pół godziny, ale uważam, że ten ostatni przypadek jest jego domyślnym (lub jedynym) zachowaniem @extend.