Строки в less

Question

[Никита Гусаков]

Возможно ли использование строк в функциях для создания селекторов?
Поясню на примере:

.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%);
}

Хотелось бы заменить на функцию

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

Если такое невозможно в less возможно ли в scss?

Answer 1

[avalak]

В less это примеси (Mixin).
Можно сделать так

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

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

Результат:

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

Comments

[Никита Гусаков]

Круто! Получилось, если кому вдруг нужно будет:

.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%);
	&:hover{
		background: @green;
	}
	&:active,
	&:focus{
		box-shadow: inset 0 0 4px fade(@color, 50%);
		background: darken(@color, 3%);
	}
}