简体   繁体   English

CSS LESS类继承

[英]CSS LESS class inheritance

Here is a css description of properties for my #myform1 .btn1 class: 这是我的#myform1 .btn1类的属性的CSS描述:

#myform1 .btn1
{
...
}

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

Is it possible to add absolutely the same properties for my #myform2 .btn2 class using LESS (any way is OK) without writing 是否可以使用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
{
...
}

Is it possible? 可能吗?

Added: 添加:

Is it possible to use LESS in some kind of this way: 是否可以通过这种方式使用LESS:

@btn-superstyle
{
...
}

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

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

Try to use this less: 尝试减少使用:

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

  &:hover {
    ...
  }

  &:active {
    ...
  }
}

For example this less: 例如以下:

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

  &:hover {
    color: blue;
  }

  &:active {
    color: red;
  }
}

provides this css: 提供此CSS:

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

Also I recomend this resource to play with less online and look at the compiled css: http://winless.org/online-less-compiler 另外,我建议将此资源减少在线使用,并查看编译后的CSS: http : //winless.org/online-less-compiler

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM