Знакомство с LESS / Введение [1/14]
×

Введение [1/14]

CSS-препроцессоры — это «программистский» подход к CSS. Они позволяют при написании стилей использовать свойственные языкам программирования приёмы и конструкции: переменные, вложенность, наследуемость, циклы, функции и математические операции. Синтаксис препроцессоров похож на обычный CSS. Код, написанный на языке препроцессора, не используется прямо в браузере, а преобразуется в чистый CSS-код с помощью специальных библиотек.

Три самых известных препроцессора — это LESS, SASS и Stylus. Они во многом похожи между собой, но имеют и ключевые различия. В этом и последующих курсах цикла мы рассмотрим препроцессор LESS.

В курсах по LESS мы будем шаг за шагом строить небольшой велосипед фреймворк компонентов. Когда он будет готов, мы сможем собирать из компонентов цельные интерфейсы. Компонентный подход позволяет структурировать большие объемы кода и легко масштабировать проекты. Препроцессор в этом деле — хорошее подспорье.

В этой серии курсов редактор CSS заменён на редактор LESS. Чтобы увидеть скомпилированный из LESS кода CSS код, можете использовать кнопку CSS.

Итак, теперь вы знаете всё, чтобы начать!


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Введение</title> <meta charset="utf-8"> <base href="/assets/course85/"> </head> <body> </body> </html>
LESS CSS
/* @bg-path: "logo-less.png"; @bg-color: #1d365d; html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { background: @bg-color url(@bg-path) 50% 25% no-repeat; } */
HTML Academy
  1. Удалите символы /* и */ в редакторе LESS.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.