Испытание: примеси и портреты [12/30]

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

Может кому пригодится
@lime: #01FF70;
@red: #FF4136;
@yellow: #FFDC00;
@fuchsia: #F012BE;
@angle: 180deg;
@size: 80px;

.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(-5deg);

}

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

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

}

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

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

3 лайка
2

Помогло, спасибо. А то в начале немного запутался с .monster-1 {
.magic(@red);
.magic(rotate; @angle)
}

3

100% результат. Анализируйте.

@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(@red);
.magic(rotate; 180deg);
}

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

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

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

4 
@lime: #01ff70;
@red: #ff4136;
@yellow: #ffdc00;
@fuchsia: #f012be;
@blue: #0008fe;

.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);
  transform: rotate(180deg);
}

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

.monster-3 {
  .magic(@yellow);
  height: 80px;
  width: 80px;
}

.monster-4 {
  transform: skewX(-5deg);
  .magic(@fuchsia);
}

99.7%, немного странное решение, смешивал css с less, да и к тому же добавил «новый» цвет в начале

6

Ну, учитывая тематику испытания, то это даже не решение. Это читинг какой-то)))
Фишка же в том, чтоб научиться использовать less

7

да, согласен с вами, но читерить всегда интересно)

8

@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(@red);
.magic(rotate; 180deg);
}

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

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

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