[英]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.