0

#myform1 .btn1 クラスのプロパティの css 記述は次のとおりです。

#myform1 .btn1
{
...
}

#myform1 .btn1:hover
{
...
}
#myform1 .btn1.active
{
...
}
#myform1 .btn1.disabled
{
...
}

私の #myform2 .btn2 クラスに LESS を使用してまったく同じプロパティを追加することは可能ですか (どの方法でも構いません)。

#myform1 .btn1 ,#myform2 .btn2
{
...
}

#myform1 .btn1:hover, #myform2 .btn2:hover
{
...
}
#myform1 .btn1.active, #myform2 .btn2.active
{
...
}
#myform1 .btn1.disabled, #myform2 .btn2.disabled
{
...
}

出来ますか？

追加した：

このような方法でLESSを使用することは可能ですか:

@btn-superstyle
{
...
}

@btn-superstyle:hover
{
...
}
@btn-superstyle.active
{
...
}
@btn-superstyle.disabled
{
...
}

#myform1 .btn1,     #myform2 .btn2
{
 @btn-superstyle; 
}
4

1 に答える 1

3

これをあまり使わないようにしてください：

#myform1 .btn1, #myform2 .btn2 {
  /* here common styles */    

  &:hover {
    ...
  }

  &:active {
    ...
  }
}

たとえば、次のようになります。

#myform1 .btn1, #myform2 .btn2 {
  color: green;  

  &:hover {
    color: blue;
  }

  &:active {
    color: red;
  }
}

このCSSを提供します：

#myform1 .btn1,
#myform2 .btn2 {
  color: green;
}
#myform1 .btn1:hover,
#myform2 .btn2:hover {
  color: blue;
}
#myform1 .btn1:active,
#myform2 .btn2:active {
  color: red;
}

また、以下のリソースでオンラインで遊んで、コンパイルされた css を確認することをお勧めします: http://winless.org/online-less-compiler

于 2012-09-02T09:36:31.383 に答える