web-dev-qa-db-ja.com

CSS-Lessクラスは疑似クラスでクラスを拡張します

私はより少ないCSSで次のようなことをどのように行うことができるのか疑問に思いました：

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

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

もちろん、これは単なる例です。必要な場所で:hover疑似クラスのプロパティを再入力しないように、疑似クラスを拡張する方法があるかどうかを指摘する必要があります。そのためのミックスインを作成できることは知っていますが、それを回避できるかどうか疑問に思っています。

ありがとう

cssmixinslesspseudo-class
18
panosru

更新：外部ファイルを変更できない場合は、セレクターを再定義し、不足している状態を追加してください。

.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の主な驚くべき機能の1つだと思います。

お役に立てれば。

31
bzx

レス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を30分以上調べていませんが、後者の場合がデフォルトの（または唯一の）@extendの動作であると思います。

7
John