Испытание: примеси и портреты. Упрощение кода?

Курсы §37. Примеси в LESS
1

Доброго времени суток. Знатоки, кто подскажет можло ли еще сократить код? Например @_ в испытании не смог реализовать.

Испытание

@lime: #01FF70;
@red: #FF4136;
@yellow: #FFDC00;
@fuchsia: #F012BE;

.magic(@color) {
background-color: @color;
}

.magic(rotate; @angle) {
transform: rotate(@angle);
}

.magic(spin; @color) {
background-color: spin(@color, 90deg);
}

.magic(reduce; @size) {
width: @size;
height: @size;
}

.magic(skew; @angle) {
transform: skewX(@angle);
}

.monster-1 {
.magic(rotate; 180deg);
.magic(@red);
}

.monster-2 {
.magic(spin; @lime);
}

.monster-3 {
.magic(reduce; 80px);
.magic(@yellow);
}

.monster-4 {
.magic(skew; -5deg);
.magic(@fuchsia);
}

Простите, что не в песочнице)

2

Отсутствие песочницы еще ладно, но вашу мысль в этом предложении мне уловить не удалось.

3
  1. Можно ли сильнее сократить код используя LESS.
  2. Можно ли применить @_ в испытании.
4

Скорее всего нет. По крайней мере исходя из своих знаний я не нахожу возможности для сокращения кода или применения универсального шаблона. Возможно, у кого-то будут другие мысли на этот счёт.

1 лайк
5

Мой результат 99.4%

@lime: #01ff70;
@red: #ff4136;
@yellow: #ffdc00;
@fuchsia: #f012be;
@blue: #0000FF;

.magic(@color) {
background-color: @color;
}

.magic(rotate; @angle) {
transform: rotate(@angle);
}

.magic(spin; @color) {
background-color: spin(@color, 90deg);
}

.magic(reduce; @size) {
width: @size;
height: @size;
}

.magic(skew; @angle) {
transform: skewX(@angle);
}

.monster-1 {
.magic(@red);
.magic(rotate; 180deg);
}

.monster-2 {
.magic(@blue);
}

.monster-3 {
.magic(@yellow);
.magic(reduce; 80px);
}

.monster-4 {
.magic(@fuchsia);
.magic(skew; -5deg)
}