Изучаем LESS: Общее описание системы
Теперь, когда мы закончили рассмотрение SASS, давайте поговорим о LESS. Если вы еще не читали мою статью по SASS, вы можете найти ее здесь.
В своей предыдущей статье я перечислил недостатки CSS и рассказал, как с помощью методов предварительной подготовки можно оптимизировать рабочий процесс.
Мы также говорили о том, как реализовать SASS с помощью переменных, вложенных элементов, примесей, функций и так далее.
Так что, теперь мы готовы приступить к изучению еще одного метода предварительной обработки — LESS.
LESS в двух словах
LESS — это язык динамических таблиц стилей, который расширяет CSS и, также как и SASS, характеризуется динамическим поведением, примером чего могут служить переменные, примеси, операции и функции.
Что вам понадобится для выполнения заданий данного урока:
Установка SimpleLESS
При первом запуске SimpleLESS вы увидите что-то вроде изображения приведенного ниже. Пожалуйста, обратите внимание — если в верхней строке вы не видите текущую версию, это означает, что приложение не работает должным образом.
В этом случае вам необходимо скачать его заново.
Подготовка разметки и LESS Javascript
Прежде, чем мы приступим к рассмотрению функционала LESS, нам нужно подготовить разметку и файлы LESS. Поэтому создайте новую папку и назовите ее « LESS » или по-другому на ваше усмотрение.
Обратите внимание, что мы включили библиотеку LESS ниже таблицы стилей:
Heading 1
Heading 2
This is a cool footer
Скопируйте и вставьте следующий код в файл style.less :
На данный момент у вас должна получиться структура файла наподобие этой:
Компиляция LESS помощью SimpLESS
Для компиляции LESS файла в CSS, запустите приложение SimpLESS и перетащите папку « LESS », которую мы создали раньше, в окно приложения:
Если в списке появилась папка, которую мы перетаскивали, значит она была успешно добавлена в приложение.
Обратите внимание, что в окне приложения будет выведена текстовая информация, которая уведомляет вас о том, был ли файл скомпилирован или нет.
В моем примере, как вы можете видеть в правом углу текст гласит « never compile ». Это означает, что наша папка LESS никогда не компилировалась:
Пожалуйста, обратите внимание, что все эти функции могут включаться или выключаться индивидуально.
Давайте рассмотрим их использование:
Теперь давайте скомпилируем наш файл LESS в CSS. Для этого нужно просто нажать на иконку « Обновить » в левом углу окна приложения SimpLESS :
Если процесс компиляции был выполнен успешно, вы увидите сообщение об успешном завершении в правом углу приложения.
Пожалуйста, обратите внимание, что пока приложение запущено, оно будет отслеживать все обновления, которые вы совершаете для файлов в папке LESS:
Так что, когда вы откроете папку LESS, вы увидите, что в нее был добавлен файл CSS.
Переменные LESS
Как и SASS, LESS также использует переменные. Если вы до этого занимались составлением кода, вы знаете, насколько использование переменных упрощает любой процесс.
В рамках предварительной обработки, наподобие той, что осуществляет LESS, переменные используются для заполнения значений каждого из стилей, применяемых в файле LESS.
Для определения переменной LESS использует знак @. Давайте посмотрим на практике, как это работает.
Откройте файл LESS и вставьте в него следующий код. Для этого кода я создал 3 переменные для цвета, размера шрифта и рамки.
Я добавил переменные myColor и myFontSize в тэг H1, переменную myBorder я добавил в список идентификаторов myList :
Вы увидите что-то похожее на то, что приведено на рисунке ниже:
Примеси LESS
Иногда нам нужно создать стили, которые могут повторяться по всей таблице стилей. В этом нам могут помочь примеси.
Чтобы понять, как в LESS работают примеси, давайте рассмотрим следующий код:
Если вы запустите документ в браузере, результат будет подобен тому, что показано на рисунке ниже:
Вложенные правила LESS
В LESS аналогично SASS применяются вложенные правила для идентификаторов и классов. Это позволяет поддерживать чистоту и организацию кода.
Чтобы показать их работу на практике, я создал пример CSS-кода и соответствующий ему вариант LESS.
Вариант CSS
Вариант LESS
Как видите, мы организовали наши стили с помощью LESS, и нам не пришлось повторять идентификатор container несколько раз.
Если вы запустите приведенные выше коды в браузере, то увидите аналогичные результаты.
Операторы LESS
Одной из самых полезных возможностей LESS является поддержка выполнения математических операций. Используя фиксированное значение стиля, вы можете добавлять, вычитать, умножать или даже делить его.
Давайте рассмотрим, как это работает:
Как вы видите, к базовому значению рамки в 5 пикселей я добавил еще 5 пикселей, а затем задал ее цвет. Базовый отступ в 90 пикселей я разделил на 3, и в результате получил отступ в 30 пикселей.
Если вы запустите этот код в браузере, то увидите следующий результат:
Функции LESS
LESS предоставляет большое количество функций для обработки элементов и стилей. В этой статье мы рассмотрим функции цвета, если вы хотите узнать больше обо всех функциях LESS, вы можете перейти по ссылке.
Ниже приводится список функций цвета LESS:
Давайте попробуем поработать с некоторыми из этих функций. Откройте файл style.less и скопируйте в него следующие коды:
Как видите, цвет фона был затемнен на 60%, а затем цвет текста тегов H1 и H2 стал светлее на 10%, а цвет текста тегов абзаца стал светлее на 20%.
Когда вы запустите данный код в браузере, то получите результат аналогичный, тому, что приведен на рисунке ниже:
Заключительное слово
Библиотека LESS предлагает для дизайнеров и разработчиков много фантастических возможностей. В этой статье представлено только общее описание системы.
Вы можете поэкспериментировать с представленными в статье кодами, после чего я хотел бы услышать о том, что у вас получилось, и увидеть результаты ваших экспериментов.
Всегда приветствуются пожелания, замечания и советы. Надеюсь, вам понравился этот урок, увидимся в следующий раз.
Что такое Less и Sass?
Оценить 1 комментарий
При правильном использовании, LESS и S(A|C)SS позволяют упростить исходный код, облегчить процесс разработки стилей.
Из минусов:
0. Сложность поддержки. Нельзя просто взять и поменять стили, их придется пересобирать.
1. Видел много излишне сложных «стилевых» проектов. Не понимаю, как элементарные вещи можно так сильно усложнять 🙂
2. Повышаются требования к front-end разработчику, и, как следствие, стоимость работ. Школьника для такой работы уже нанять не получится.
Что в итоге произошло. В один прекрасный момент какие-то там рубисты придумали SCSS (они вообще не любят все что не в стиле ruby в плане минимализма и выразительности). Затем чуваки подумали и сказали, SCSS это круто но почему-то они используют синтаксис знакомый именно Ruby разработчикам а не обычные для CSS конструкции. В итоге реализовали LESS, причем его уже реализовали на javascript, что с наличием node.js позволило это все добро еще на одной платформе собирать. А так как под эту платформу и так плодили препроцессоры оно удачно вписалось.
Далее уже шли какие-то модификации дальнейшие, вроде того же Stylus, где синтаксис упростили просто до нельзя.
Личное мнение. На сегодняшний день я не вижу смысла использовать чистый CSS хоть на малых хоть на больших проектах. Вот вообще никакого.
Введение в LESS
Что такое LESS?
LESS был создан Alexis Sellier под влиянием более раннего метаязыка стилей SASS (Syntactically Awesome Stylesheets). Одной из особенностью LESS является то, что он может работать как на клиентской стороне, так и на стороне сервера. Язык стилей LESS это продукт с открытым исходным кодом, который строится на языке программирования JavaScript.
Подключение LESS
Начнем с первого варианта:
По аналогии с каскадными таблицами стилей вам необходимо подключить файл *.less к Вашему HTML документу с использованием тега :
После этого вам необходимо скачать файл со скриптом, или, как вариант, получить ссылку на сеть доставки контента (CDN) на официальном сайте метаязыка LESS. Давайте остановимся на первом варианте и подключим скачанный файл:
Давайте перейдем к рассмотрению примера в котором начнем использовать LESS:
В этом примере мы создали отдельный файл 2.less в котором указали следующие стили:
Кроме того, мы подключили к документу скрипт JavaScript, который выступает в роли компилятора и преобразует метаязык LESS в каскадные таблицы стилей CSS.
Результат преобразования будет следующий:
Как вы можете заметить результат компиляции (преобразования) практически идентичен первоначальным стилям, за исключением того, что RGB значение цвета было конвертировано в шестнадцатеричную систему HEX, что не влияет на внешний вид, но незначительно сокращает количество символов для описания этого стиля.
Результат нашего примера * :
Рис.2 Пример подключения less файла к документу.
Хочу сразу обратить ваше внимание на то, что этот пример не отражает возможностей метаязыка LESS, которые будут рассмотрены в следующих статьях этого учебника, а служит для понимания того как происходит компиляция, что нам необходимо для дальнейшего изучения.
Рассмотренный выше метод работы с файлами less имеет право на существование, но не является рекомендованым к использованию, по той причине, что производительность и скорость отображения стилей документа при этом подходе снижается. В настоящее время существует большое количество инструментов для компилиции LESS в CSS, начиная от компиляции на стороне сервера, заканчивая отдельными программными продуктами, один из которых мы сейчас с Вами рассмотрим.
Препроцессор Koala
Задача этого учебника заключается в быстром освоении метаязыка LESS, именно по этой причине, на начальном этапе, я предлагаю Вам для компиляции использовать программный продукт Koala.
Этот программный продукт позволит нам не тратить время на настройку среды, которая будет отслеживать изменение *.less файлов и компиляцию их в *.css файлы, что идеально для первичного знакомства с метаязыком LESS не отвлекаясь на технические особенности по настройке той, или иной среды.
Для начала нам необходимо перейти на официальный сайт продукта и скачать его последнюю версию и установить на свой компьютер.
После этого необходимо создать файл *.less и подключить в программе Koala папку в которой находится этот файл (нажмите на +), например, в моем случае папка less:
Рис.3 Пример подключения папки с файлом less.
Вы должны увидеть в окне программы файл, который вы создали заранее. Кликните под название файла, как показано на изображение ниже, это позволит Вам выбрать путь куда будут компилироваться CSS файлы.
Рис.4 Выбор пути для компиляции CSS файлов.
Я выбрал ту же папку в которой находится less файл, в результате у вас должно получиться следующее:
Рис.5 Установка каталога для компиляции CSS.
Не забудьте поставить галочку возле Auto Compile в случае необходимости компиляции минифицированной версии css файлов «на лету».
Комментарии в LESS
По аналогии с CSS допускается использовать внутри *.less файла как однострочные, так и многострочные комментарии со следующим синтаксисом:
Препроцессор less: что это такое и с чем его едят
Мы все знаем, что CSS может быть немного неприятно писать, особенно когда речь идет о серьезных проектах с тысячами строк кода. В конечном итоге Вы вынуждены повсюду дублировать одни и те же стили и использовать поиск и замену Вашего редактора или IDE при каждом изменении цвета. Работа с большим файлом на чистом css – это кропотливый и, главное, совсем не творческий процесс, в котором слишком легко упустить важную деталь и ошибиться. Но все это до тех пор, пока Вы не начинаете использовать препроцессор.
К счастью, сообщество веб-разработчиков решило проблему громоздких css-файлов с уймой повторяющихся блоков стилей. Теперь у нас есть CSS-препроцессоры, такие как Less, Sass и Scss. Они дают нам ряд преимуществ по сравнению с простым CSS:
Негативный аспект заключается лишь в том, что, если Вы используете один из этих препроцессоров, Вам нужно будет скомпилировать таблицы стилей до обычного CSS, чтобы он работал в браузерах.
Инструментарий для работы с препроцессором less
Если у Вас установлена node (а она у Вас установлена, раз Вы занимаетесь веб-разработкой) и Вы знаете, что такое терминал, откройте его и установите через него Less, используя следующую команду NPM:
npm install –g less
lessc styles.less styles.css
После того как Вы скомпилировали css-файл, подключите его к html-файлу. Если в процессе компиляции произошла ошибка, она отобразится в Вашем терминале.
Работа с переменными в препроцессоре less
Одной из основных особенностей Less является возможность создавать переменные также, как и в стандартном языке программирования. Они могут хранить любые типы значений, которые Вы часто используете: цвета, размеры, селекторы, имена шрифтов, URL-адреса и так далее. Философия less заключается в повторном использовании синтаксиса CSS, где это возможно.
Здесь мы определяем и используем две переменные: одну для цвета фона и одну для цвета текста, обе из которых содержат шестнадцатеричные коды.
В приведенном выше примере цвет фона серый, а текст красный. Если, скажем, мы хотим переключить их и получить красные элементы с серым текстом, мы можем просто изменить значения переменных, вместо того, чтобы вручную заменять каждое использование этих цветов в таблицах стилей.
Работа с миксинами в препроцессоре less
Less позволяет нам использовать существующий класс или идентификаторы и применять все его стили непосредственно к другому селектору. Следующий пример прояснит ситуацию:
Если Вы не хотите, чтобы миксин появлялся в скомпилированном CSS, Вы можете поместить скобки после него:
Работа с вложенностью в препроцессоре less
Вложенность может использоваться для структурирования таблицы стилей таким образом, чтобы она соответствовала структуре HTML страницы, одновременно уменьшая вероятность конфликтов. Вот пример неупорядоченного списка и его дочерних элементов:
Как и в языках программирования, переменные Less получают свои значения в зависимости от области видимости. Если значение не указано в конкретной области, LESS будет искать его в верхних блоках, пока не найдет ближайшее объявление.
В следующем примере после компиляции в CSS наш li будет иметь текст белого цвета, так как в правилах ul мы предварительно определили strong > @ text-color.
Работа с функциями в препроцессоре less
В Less также есть функции! Он начинает все больше и больше походить на язык программирования, а не «таблицу разметки стилей», не так ли?
Давайте посмотрим на функцию fadeout, которая увеличивает прозрачность цвета.
Приведенный выше код добавляет эффект прозрачности нашему div при наведении курсора на него. Существует множество других полезных функций, уже встроенных в Less, стоит только поискать.
Изучаем LESS в CSS: Введение
Дата публикации: 2018-01-15
От автора: я очень рад начать сегодня серию статей, посвященных LESS, динамическому языку, который значительно расширяет возможности CSS и добавляет в него много свойств. LESS позволяет вам использовать переменные, миксины, вложенные правила и даже функции внутри CSS. Он чрезвычайно эффективен и может значительно ускорить процесс разработки. Конечно, чтобы освоить эту тему, вам потребуется приложить усилия, но как только вы разберетесь в LESS CSS, вы точно никогда больше не захотите работать без него.
План статей серии
Использование вложенных правил
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Разделяй и властвуй
Применение на практике
Как видите, впереди вас ожидает много чего интересного. Давайте же начнем.
Что такое LESS и зачем он нужен?
За то время, что я занимаюсь разработкой, я обнаружил, что, когда речь заходит о LESS (или любом другом препроцессоре CSS), люди делятся на три типа. Есть люди, типа Я никогда о нем не слышал, другой тип –Да, я пробовал, но это не моё, и третий тип – О, да! Я его обожаю!
Цель этой серии – сделать так, чтобы вы оказались в третьей категории.
Согласно Википедии, LESS: это динамический язык стилей, который разработал Алексис Селлье (Alexis Sellier). Он был создан на основе языка стилей Sass и, в свою очередь, оказал влияние на его новый синтаксис “SCSS”, в котором также использован синтаксис, являющийся расширением CSS.
LESS был представлен в 2009 и в последние месяцы получил широкое применение в больших и малых проектах, включая фреймворк Bootstrap от компании Twitter, самый популярный проект на веб-сервисе GitHub.
В ходе ознакомления со статьями этой серии вы сможете лучше уловить суть того, что же такое на самом деле LESS и как его можно использовать, и в скором времени вы будете в состоянии создать впечатляющую библиотеку переменных, быстрых эффектов CSS3 и многое другое.
Какие материалы есть по этой теме?
Существует множество источников, в которых вы можете прочитать про LESS, первым из них может быть //lesscss.org, домашняя страница LESS. Этот ресурс поможет вам в установке, работе с кодом, обработке файлов LESS и во многих других вопросах.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Веб-сайт Smashing Magazine тоже опубликовал введение в LESS и его сравнение с SASS, то есть с другим популярным препроцессором CSS.
Также благодаря простому поиску в Google по запросу «LESS» вы можете найти много разных ресурсов, советов и рекомендаций, но ничто не поможет вам лучше освоить LESS, чем если вы сами на практике возьметесь за работу с кодом и изучите все с самого начала.
LESS работает на стороне сервера или клиента?
Хороший вопрос, ответ на него таков: и на той, и на другой. Или же ни на одной из них. Чтобы применить LESS на стороне клиента, нужно сохранять все ваши файлы как type.less и включать их в документ точно так же, как бы вы делали это с файлом CSS.
После того, как вы загрузили все файлы LESS, нужно обратится к файлу LESS JS, который компилирует все ваши файлы в одну таблицу стилей CSS.
Я не буду вдаваться в подробности того, как установить LESS на стороне сервере просто потому, что я не очень много работаю на стороне сервера и не хотел бы вводить вас в заблуждение. Вместо этого, я подробно рассмотрю третий метод, который я очень рекомендую. Работать ни на той, ни на другой стороне.
Использование LESS.APP для MAC OS X
Одним из наиболее авторитетных клиентов, используемых мною при написании кода в LESS, является приложение LESS.app для Mac OS X (Извините меня, пользователи Microsoft – просто попробуйте SimpLESS). С помощью LESS.app происходит компиляция файлов LESS в таблицу стилей CSS и даже появляется возможность выполнить минимизацию CSS, чтобы уменьшить размер файла. Это делает создание стилей неимоверно эффективным, потому что вы можете использовать десятки файлов LESS, компилировать их в одну таблицу стилей, выполнять минимизацию и публиковать их на сервере.
Для того, чтобы использовать LESS.app, просто перетащите свою папку с рабочим кодом в окно приложения и LESS.app автоматически найдет ваши файлы LESS. Потом можно уточнить, какие именно файлы вы хотите конвертировать в CSS, куда их нужно сохранить (в рабочей папке) и нужно ли выполнять минимизацию CSS. Крутая вещь, определенно.
Итак, уделите несколько минут сегодня и в будущем тому, чтобы разобраться в LESS и LESS.app, и изучить некоторые материалы по этой теме. Следующая статья этой серии будет посвящена Применению переменных. До скорого.
Автор: Alex Ball
Редакция: Команда webformyself.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!