Применение блока кода для псевдоклассов в LESS
Давайте сделаем функцию, которая будет задавать
стили ссылки в состоянии hover.
Пусть эта функция параметром принимает блок кода:
styles.less.hover(@code) {
}
Давайте выведем переданный блок кода внутри
состояния hover:
styles.less.hover(@code) {
&:hover {
@code();
}
}
Воспользуемся нашей фукцией внутри ссылки:
styles.lessa {
color: red;
.hover({
color: blue;
text-decoration: none;
});
}
Результат компиляции:
styles.cssa {
color: red;
}
a:hover {
color: blue;
text-decoration: none;
}
Задание 1
Сделайте аналогичную функцию, которая будет
задавать стили для инпута в состоянии focus.