Lines in less

Question

css

Is it possible to use strings in functions to create selectors?
Let me explain with an example:

.btn-green{
  .btn-color(@green, @white);
}
.btn-green:hover{
  background: @green;
}
.btn-green:active,
.btn-green:focus{
  .btn-active(@green);
}
.btn-color(@color, @font-color)
{
  .gradient(lighten(@color, 10%), @color);
  color: @font-color;
  border: 1px solid @color;
  text-shadow: 0 0 1px lighten(@color, 10%);
}
.btn-active(@color)
{
  box-shadow: inset 0 0 4px fade(@color, 50%);
  background: darken(@color, 3%);
}

I would like to replace the function

.btn-color(@name, @color, @font-color){
  @name:hover{
  //
  }
  @name:active{
  //
  }
}

If this is not possible in less, is it possible in scss?

Answer 1

In less, these are Mixins.
Can you do it like this

.btn-pretty(@color) {
    &:hover {
        color: darken(@color, 10%);
    }
    &:active {
        color: darken(@color, 20%);        
    }
}

.btn-green {
    .btn-pretty(#f4f4f4);
}

Result:

.btn-green:hover{color:#dbdbdb;}
.btn-green:active{color:#c1c1c1;}