Перейти к содержанию

Руководство LESS

Добро пожаловать в Путеводитель для новичков по CSS-препроцессору Less! Эта книга поможет вам разобраться со всеми возможностями, которые предоставляет этот замечательный CSS-препроцессор. Неважно, новичок вы, впервые решивший разобраться с препроцессорами или бородатый веб-разработчик, который повидал на своём веку многие технологии — каждый найдёт что-нибудь интересное для себя.

0. Вступление

Прежде чем вы перейдёте к чтению, я бы хотел рассказать о нескольких основных правилах:

  • У вас установлен Node.js.
  • Вы умеете пользоваться пакетным менеджером npm.
  • Вы имеете представление о работе с консолью.
  • Вы хорошо знаете HTML (HTML5), CSS3 и как-нибудь разбираетесь в JavaScript.

  • Предисловие

  • Целевая аудитория

1. Основы

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

2. Работа с селекторами, медиа-запросами и файлами

Многие статьи начинаются со слов об удобном использовании переменных, примесей и прочих радостях. Я же начну свой рассказ о том, как же хорошо стало работать с селекторами, медиа-запросами и файлами. Мне кажется, что это наиболее важный инструментарий, который предлагает нам препроцессор. Да, работать с переменными одно удовольствие, но с селекторами приходится работать куда чаще.

В этой главе я расскажу о комментариях, вложенных селекторах, работе с файлами, группировке селекторов и многих других интересных вещах.

3. Переменные и примеси

Во всех языках программирования существуют переменные и функции, которые позволяют делать код чистым и переиспользуемым. Как мы все знаем, CSS, по сути своей, не является языком программирования в прямом смысле этого выражения. Но, с помощью препроцессоров, можно попытаться исправить это положение.

Из этой главы вы узнаете, как использовать переменные и примеси, правильно давать им имена, а также некоторые особенности и тонкости их применения в реальных проектах.

4. Операции со свойствами и встроенные функции

Для удобства пользователей препроцессора Less его разработчики добавили некоторые встроенные функции.

В этой главе мы поговорим о возможности слияния свойств, которое может пригодиться при наличии одинаковых свойств в двух селекторах (примесях), встроенных функциях для работы со строками, списками (массивами), изображениями и типами данных. А также затронем тему манипуляции цветами и поговорим о наличии всевозможных математических функциях, которые зачем-то могут пригодиться в CSS.

5. Инструкции (операторы)

Препроцессор Less включает несколько инструкций (операторов), называемых также управляющими инструкциями (конструкциями). Набор инструкций тривиален и включает в себя только классический if и while, причём со своим синтаксисом, назначением и большим количеством ограничений.

6. JavaScript в Less

Этой главой заканчивается основная, фундаментальная часть книги, рассказывающая о возможностях CSS-препроцессора Less. Финал должен быть красивым, и обеспечить его может только недокументированная возможность исполнения JavaScript-кода в less-файлах.

Из этой главы вы узнаете, как использовать JavaScript-код в Less, манипулировать введенными данными, обрабатывать и возвращать их.

Источник