Добавил:
Upload
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Less. Путеводитель для новичков.pdf
X
- •Введение
- •Предисловие
- •Благодарности
- •Целевая аудитория
- •Глава 1. Основы
- •Препроцессоры
- •CSS-препроцессоры
- •Грань между Less и CSS
- •Компиляция и отладка
- •Глава 2. Работа с селекторами, медиа-запросами и файлами
- •Комментарии
- •Вложенные правила
- •Ссылка на родителя селектора
- •Группировка селекторов
- •Использование медиавыражений
- •Импорт стилей
- •Домашнее задание
- •Глава 3. Переменные и примеси
- •Использование переменных
- •Интерполяция переменных
- •Наименование переменных
- •Использование примесей
- •Специальные параметры и сопоставление шаблонов
- •Дополнительные возможности примесей
- •Работа с набором правил
- •Домашнее задание
- •Глава 4. Операции со свойствами и встроенные функции
- •Слияние свойств
- •Строки и списки
- •Работа с изображениями
- •Работа с типами данных и единицами измерения
- •Математические функции
- •Манипуляции с цветами
- •Домашнее задание
- •Глава 5. Инструкции (операторы)
- •Условные конструкции (защита примесей)
- •Циклические конструкции
- •Домашнее задание
- •Глава 6. JavaScript в Less
Less. Путеводитель для новичков
Домашнее задание
В этом домашнем задании вам предстоит написать код для генерации вспомогательных классов на основе предоставляемых данных в виде двух списков.
Входные данные будут такими:
// Имена классов
@listNames: black, red, purple, green, blue;
// Цвет
@listColors: #000000, #ff0000, #800080, #008000, #0000ff;
Индексы двух списков совпадают. Так, например, класс black имеет цвет #000000 , а purple — #800080 .
Результат должен совпадать с вручную написанным CSS-кодом:
.color-black { color: #000000; }
.color-red |
{ color: #ff0000; } |
... |
|
.color-blue |
{ color: #0000ff; } |
Замечание
Результат отформатирован вручную для наглядности.
Домашнее задание |
125 |
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]