Учебник LESS для начинающих

LESS — препроцессор CSS: он добавляет к привычному CSS переменные, вложенность, миксины и операции, а затем компилируется в обычный CSS, который понимает браузер.

Что нам понадобится для изучения LESS:

  • Знание языка разметки HTML.

    Вы можете изучить его на сайте в нашем учебнике HTML.

  • Знание каскадных таблиц стилей CSS.

    Вы можете изучить их на сайте в нашем учебнике CSS.

  • Текстовый редактор.

    Для обучения рекомендую Visual Studio Code (VS Code) — бесплатный редактор кода для Windows, macOS и Linux.

  • Браузер актуальной версии.

    Для просмотра результатов используйте обновлённый браузер:

    • Chrome
    • Edge
    • Firefox
    • Safari
    • Opera
  • Компилятор LESS, используемый в учебнике:

    компилятор KoalaKoala

    Koala давно не обновляется, поэтому сегодня LESS чаще компилируют через npm-пакет lessc или расширение для VS Code Easy LESS. Для учебника подойдёт любой из этих способов.

  • Желание совершенствоваться и получать новые знания.

Что вам даст обучение:

  • Вы изучите LESS — расширение языка CSS, которое делает стили короче и удобнее в работе.
  • Вы научитесь использовать переменные, вложенные правила, миксины, операции и импорт, чтобы не повторять один и тот же код.
  • Вы поймёте, как упростить работу с большим объёмом CSS и сделать код легче поддерживаемым и масштабируемым.
  • Знакомство с LESS поможет понять и другие препроцессоры, например Sass, и принципы, на которых построены современные CSS-возможности вроде пользовательских свойств и вложенности.

Как проходить учебник:

LESS — дополнительный курс после CSS. Для перехода к JavaScript проходить его необязательно, но он полезен, если вы работаете с проектами на LESS или хотите разобраться в препроцессорах.

Проходите уроки по порядку и сразу компилируйте примеры, сравнивая LESS-код с получившимся CSS. В конце каждого урока отмечайте его пройденным — прогресс будет виден в оглавлении учебника.

Для практики перепишите на LESS стили своей страницы из учебника CSS: вынесите цвета в переменные, вложите правила и оформите повторяющиеся блоки миксинами.

Начать обучение LESS