Меньше пользовательских функций/примесей

Например, у меня меньше кода

form.someForm
{
    .form-group
    {
        > div
        {
            @media @wideMobile
            {
                width: calc(~"100%-144px");            
            }
        }

        > label
        {
            @media @wideMobile
            {
                width: 138px;            
            }
        }

    }
}

Я хочу написать что-то вроде

form.someForm
{
    .setWidths(138px,144px); 
}

Чтобы получить тот же результат. Как я могу это сделать?


less less-mixins
person user1325696    schedule 03.06.2014    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Я предполагаю, что все эти примеры в документах могут породить несколько идей:

form.someForm {
    .setWidths(138px, 144px);
}

// the mixin:

.setWidths(@labelWidth, @divMargin) {
    .form-group {
        > div {
            @media @wideMobile {
                width: calc(100% ~'-' @divMargin);
            }
        }

        > label {
            @media @wideMobile {
                width: @labelWidth;
            }
        }
    }
}

Или даже короче (если потомки используют один и тот же медиа-запрос):

.setWidths(@labelWidth, @divMargin) {
    .form-group {
        @media @wideMobile {
            > div   {width: calc(100% ~'-' @divMargin)}
            > label {width: @labelWidth}
        }
    }
}
person seven-phases-max    schedule 03.06.2014
comment
Извините за задержку. Не было возможности попробовать. Это действительно работает, большое спасибо. Это так приятно скрывать знание того, как оно устроено. - person user1325696; 07.06.2014