CSS-Less lớp mở rộng lớp với lớp giả

Question

tôi đã tự hỏi làm thế nào tôi có thể làm điều gì đó như sau với ít css:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

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

Of-nhiên đây chỉ là một ví dụ, những gì cần phải chỉ là nếu có là bất kỳ cách nào để mở rộng lớp giả để tránh nhập lại các thuộc tính của :hover lớp giả ở mọi nơi tôi cần chúng. Tôi biết tôi có thể tạo ra một mixin cho điều đó nhưng tôi tự hỏi nếu tôi có thể tránh nó.

Cảm ơn

Answer 1

UPDATE: Nếu bạn không thể sửa đổi tập tin bên ngoài chỉ xác định lại selectors, và thêm trạng thái mất tích:

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

Better bây giờ? :)

---

Bạn không cần lớp giả. Nó sẽ chỉ làm việc :)

Hãy thử điều này:

.btn { 
    background: yellow; 

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

button { 
    .btn; 
} 

Mỗi yếu tố bạn tạo sẽ thừa hưởng bất cứ điều gì được xác định, bao gồm trạng thái di chuột. Tôi nghĩ đó là một trong những tính năng tuyệt vời chính của LESS.

Hy vọng điều này sẽ hữu ích.

Answer 2

Trong Ít 1.4.0

này (1.4.1?):

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

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

Mở rộng thế này:

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

Cẩn thận mặc dù, điều này:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.abc .btn { 
    margin: 2px; 
} 

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

} 

Sẽ xuất kết quả này:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.abc .btn { 
    margin: 2px; 
} 

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

} 

Tôi chưa xem xét SASS hơn nửa giờ, nhưng tôi tin rằng trường hợp sau là hành vi mặc định của @extend.