17/30 Метод профессионального тыка в поиске фона. Правильно?

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

.paint(@color) when (@color = @lime){
.rotate(0deg);
background-color: lighten(grey, 38%);
}

.paint(@color) when (@color = @red) {
.rotate(0deg);
background-color: lighten(grey, 38%);
}

.paint(@color) when (@color = @yellow) {
background-color: lighten(grey, 38%);
}

.paint(@color) when (@color = @fuchsia) {
.resize(130px);
}

С цветом монстриков пришлось экспериментировать, так как обычный background-color: none; почему-то не сработал. Как еще можно решить задачу?

2

У меня по-другому:

.rotate(@angle) when (@angle > 90)  {
    transform: rotate(@angle);
}

.paint(@color) when (@color = @fuchsia) {
    background-color: @color;
}

.resize(@size) when (@size < 100px) {
    width: @size;
    height: @size;
}
2 лайка
3

Выглядит в разы красивее. Спасибо, буду разбираться, что понаделал)

4

Здравствуйте! Можете объяснить первое последнее правила. Спасибо!

5

Сами правила уже были написаны. Оставалось только подобрать условия. Что вы не понимаете? На основании чего именно такие условия или что-то другое?

6

Если угол больше 90 то повернуть фигуру на данный угол. У первой фигуры угол 45 градусов но условие к ней применяется. Вот это мне непонятно

7

Вы не совсем правильно поняли. Когда вы загрузили задание, вы видите применение всех примесей к портретам. Ваша задача установить такие условия, чтобы примеси к определенным элементам не применились. То есть, на примере первого портрета, вы видите, что к нему применилась примесь .rotate(45deg); (портрет повернут). Но в образце это не так. Значит, надо сделать, чтобы примесь к портрету не применялась.

8

Теперь понял. Спасибо!

9

А какие будут размеры в двух последних блоках , при выполнении условия

.resize(@size) when (@size < 100px) {
width: @size;
height: @size;
}

В блоках заданы размеры :
.monster-3 {
.resize(130px);
.rotate(180deg);
.paint(@yellow);
}

.monster-4 {
.resize(150px);
.rotate(270deg);
.paint(@fuchsia);
}

Получается , если выполнится условие , то размеры будут равны 100px , верно ?

10

Сделал вот так(100%):

.rotate(@angle) when (@angle >= 180deg) {
transform: rotate(@angle);
}

.paint(@color) when (@color=@fuchsia){
background-color: @color;
}

.resize(@size) when (@size<130px){
width: @size;
height: @size;
}

11

Я так понимаю в условиях не обязательно писать deg, px, работает и просто с цифрами ?!

условия 
@lime: #01ff70;
@red: #ff4136;
@yellow: #ffdc00;
@fuchsia: #f012be;

// Добавьте к примесям условия применения
.rotate(@angle) when (@angle >= 180){
    transform: rotate(@angle);
}

.paint(@color) when (@color = @fuchsia) {
    background-color: @color;
}

.resize(@size) when (@size < 130) {
    width: @size;
    height: @size;
}

// Не меняйте параметры применения примесей!
.monster-1 {
    .resize(80px);
    .rotate(45deg);
    .paint(@lime);
}

.monster-2 {
    .resize(90px);
    .rotate(90deg);
    .paint(@red);
}

.monster-3 {
    .resize(130px);
    .rotate(180deg);
    .paint(@yellow);
}

.monster-4 {
    .resize(150px);
    .rotate(270deg);
    .paint(@fuchsia);
}