CODEWITHSUNDEEP
htmlcssless
Haradzieniec
Haradzieniec

Reputation: 9340

CSS LESS class inheritance

Here is a css description of properties for my #myform1 .btn1 class:

#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

#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:

@btn-superstyle
{
...
}

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

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

Upvotes: 0

Views: 686

Answers (1)

Danil Speransky
Danil Speransky

Reputation: 30453

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:

#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

Upvotes: 3

Related Questions