CSSレスクラス擬似クラスを持つクラスを拡張

Question

私はあまりCSSで次のように行うことができますどのように思っていた

：これがあればそこにある指し示すために必要なものだけの例、であるのコース

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

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

を私が必要とするあらゆる場所で:hover疑似クラスのプロパティを再入力しないようにするために、疑似クラスを拡張する方法です。私はそれのためのmixinを作成することができますが、私はそれを避けることができるかと思っています。

おかげ

Answer 1

UPDATE： あなただけのセレクタを再定義し、不足している状態を追加した外部ファイルを変更できない場合：

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

作成した各要素がホバー状態を含む、定義されたものは何でも継承されます：それはちょうど

はこれを試してみてください:)動作します。私はそれがLESSの主な驚くべき機能の1つだと思います。

これが役に立ちます。あまり1.4.0では

Answer 2

（？1.4.1）

この：

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

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

たが、これに拡大：

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.abc .btn { 
    margin: 2px; 
} 

.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) { 

} 

私はSASSを30分以上調べていませんが、後のケースはデフォルト（または唯一の）@extend動作だと思います。