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

CSS LESS类继承

1 个答案: