- •Введение
- •Предисловие
- •Благодарности
- •Целевая аудитория
- •Глава 1. Основы
- •Препроцессоры
- •CSS-препроцессоры
- •Грань между Less и CSS
- •Компиляция и отладка
- •Глава 2. Работа с селекторами, медиа-запросами и файлами
- •Комментарии
- •Вложенные правила
- •Ссылка на родителя селектора
- •Группировка селекторов
- •Использование медиавыражений
- •Импорт стилей
- •Домашнее задание
- •Глава 3. Переменные и примеси
- •Использование переменных
- •Интерполяция переменных
- •Наименование переменных
- •Использование примесей
- •Специальные параметры и сопоставление шаблонов
- •Дополнительные возможности примесей
- •Работа с набором правил
- •Домашнее задание
- •Глава 4. Операции со свойствами и встроенные функции
- •Слияние свойств
- •Строки и списки
- •Работа с изображениями
- •Работа с типами данных и единицами измерения
- •Математические функции
- •Манипуляции с цветами
- •Домашнее задание
- •Глава 5. Инструкции (операторы)
- •Условные конструкции (защита примесей)
- •Циклические конструкции
- •Домашнее задание
- •Глава 6. JavaScript в Less
Less. Путеводитель для новичков
Домашнее задание
На этот раз читателю предлагается решить несколько задач для закрепления пройденного материала.
Задача 1. Вычисление значения
На основе знаний, полученных из главы 3 и 4, необходимо написать примесь, которая возвращает переменную
@result . Для этого предлагается использовать примесь как функцию.
В этой функции требуется найти результат следующего математического выражения:
При решении следует использовать математические функции.
Задача 2. Работа с цветом
На основе знаний, полученных в этой главе, требуется написать less-файл, в котором:
Инициализирована переменная @color с любым произвольным цветом.
Определены переменные @color-darken и @color-light , значения которых зависят от переменной @color
следующим образом:
Значение @color-dark является значением переменной @color , затемненным на 25%.
Значение @color-light является значением переменной @color , осветленным на 25%.
Определен цвет ссылки по умолчанию, как значение переменной @color-dark , а цвет при наведении курсора мыши является значением переменной @color-light .
Не волнуйтесь, у вас все получится! Если у вас возникают какие-либо сложности, то посмотрите решение этого задания в архиве, который прилагается к этой книге.
Домашнее задание |
113 |