html - CSS LESS 类继承

Question

这是我的 #myform1 .btn1 类的属性的 CSS 描述：

#myform1 .btn1
{
...
}

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

是否可以使用LESS（任何方式都可以）为我的#myform2 .btn2 类添加完全相同的属性而无需编写

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

Answer 1

尽量少用这个：

#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