hell0w0rd
@hell0w0rd
Просто разработчик

Строки в less

Возможно ли использование строк в функциях для создания селекторов?
Поясню на примере:
.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?
  • Вопрос задан
  • 3473 просмотра
Решения вопроса 1
avalak
@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;}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы