Less что за программа

Содержание

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

План статей серии

Использование вложенных правил

Разделяй и властвуй

Применение на практике

Как видите, впереди вас ожидает много чего интересного. Давайте же начнем.

Что такое LESS и зачем он нужен?

За то время, что я занимаюсь разработкой, я обнаружил, что, когда речь заходит о LESS (или любом другом препроцессоре CSS), люди делятся на три типа. Есть люди, типа Я никогда о нем не слышал, другой тип –Да, я пробовал, но это не моё, и третий тип – О, да! Я его обожаю!

WHAT IS LES MILLS CORE

Цель этой серии – сделать так, чтобы вы оказались в третьей категории.

Согласно Википедии, 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.

Gamers PLEASE Stop Doing This #shorts

И это на стороне клиента! Не забывайте, что нужно обращаться к файлу the less.js после того, как вы добавите таблицу стилей .less.

Я не буду вдаваться в подробности того, как установить 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, и изучить некоторые материалы по этой теме. Следующая статья этой серии будет посвящена Применению переменных. До скорого.

Редакция: Команда webformyself.

Источник: webformyself.com

Команда less в Linux

Об утилите и команде more, которая предназначена для постраничного просмотра больших текстовых файлов, мы уже писали. А сегодня расскажем о более функциональной команде less — она позволяет перематывать текст не только вперёд, но и назад, осуществлять поиск в обоих направлениях, переходить сразу в конец или в начало файла.

Особенность less заключается в том, что команда не считывает текст полностью, а загружает его небольшими фрагментами.

Синтаксис и опции less

Запись команды less в терминале выглядит так:

команда опции файл

Наиболее популярные опции:

-a, —search-skip-screen — не осуществлять поиск в тексте, который в данный момент отображен на экране;
-bn, —buffers=n — задать размер буфера памяти;
-c, —clear-screen — листать текст, полностью стирая содержимое экрана (построчная прокрутка работать не будет);
-Dxcolor, —color=xcolor — задать цвет отображаемого текста;
-E, —QUIT-AT-EOF — выйти, когда утилита достигнет конца файла;
-e, —quit-at-eof — выйти, когда утилита второй раз достигнет конца файла;
-F, —quit-if-one-screen — выйти, если содержимое файла помещается на одном экране;
-f, —force — открыть специальный файл;
-hn, —max-back-scroll=n — задать максимальное количество строк для прокрутки назад;
-yn, —max-forw-scroll=n — задать максимальное количество строк для прокрутки вперёд;
-i, —ignore-case — игнорировать регистр;
-I, —IGNORE-CASE — игнорировать регистр, даже если паттерн для поиска содержит заглавные буквы;
-jn, —jump-target=n — указать, в какой строке должна быть выведена искомая информация;
-J, —status-column — пометить строки, соответствующие результатам поиска;
-n, —line-numbers — не выводить номера строк;
-N, —LINE-NUMBERS — вывести номера строк;
-s, —squeeze-blank-lines — заменить множество идущих подряд пустых строк одной пустой строкой;
-w, —hilite-unread — выделить первую строку нового фрагмента текста.

Примеры использования less

Использование опций не является обязательным. Открыть файл можно, выполнив следующую команду:

Командная строка исчезнет, а в окне терминала откроется указанный вами документ. После этого его можно читать, пользуясь для прокручивания строк вперед и назад клавишами Enter и y либо другими.

Внизу окна вы увидите поле с мигающим курсором — здесь можно напечатать какую-либо внутреннюю команду, например, задать утилите паттерн поиска.

Опции нужны для того, чтобы оптимизировать отображение текста и сделать работу с утилитой более удобной. К примеру, в текстах часто встречаются множественные пустые строки. Они «съедают» место на экране, не принося никакой пользы. Поэтому к команде less стоит всегда добавлять опцию -s или —squeeze-blank-lines — она удаляет лишние пустые строки.

less -s textfile.txt

Сравните как выглядит один и тот же текст с использованием опции -s (слева) и без неё (справа).

Впрочем, утилиту less зачастую используют не для чтения текста, а для поиска определенных участков в больших документах. Если вам нужно найти то или иное слово, напечатайте в поле с мигающим курсором /текст (для поиска вниз по тексту) или ?текст (чтобы выполнить поиск less вверх по тексту) и нажмите Enter. При необходимости используйте стандартные паттерны. Все участки текста, которые соответствуют заданным условиям поиска, будут подсвечены контрастным цветом.

Если вас интересует как выйти из less, то для выхода из утилиты и возвращения к командной строке терминала нажмите q, ZZ или выполните другую команду, сигнализирующую о завершении работы.

Следует заметить, что утилита less предназначена только для просмотра документов. Она не позволяет вносить в текст правки, форматировать или пересохранять его.

Выводы

Команда less в Linux пригодится для просмотра по-настоящему больших текстовых файлов, с которыми затруднительно работать в текстовых редакторах вроде vim или с помощью утилит, загружающих весь документ сразу. Если какие-то нюансы управления утилитой less остались вам непонятны, оставьте свой вопрос в комментариях и более опытные пользователи помогут решить проблему.

Обнаружили ошибку в тексте? Сообщите мне об этом. Выделите текст с ошибкой и нажмите Ctrl+Enter.

Источник: losst.pro

LESS: программируемый язык стилей

Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.

Что такое LESS?

LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в CSS. Он вводит переменные, операции, function-like элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.

Как использовать LESS

Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету или скомпилировать его заранее и использовать получившийся CSS файл. Не бойтесь слова «компилировать» (я постоянно его использую), это очень просто.

Используем LESS и Javascript файл

Для начала нужно скачать с сайта LESS Javascript файл и привязать его к страничке как любой другой js скрипт.

Затем создадим файл с расширением .less и привяжем его с помощью такого кода:

Удостоверьтесь, что вы прикрепили LESS файл перед JS.
Теперь LESS файл будет работать также как и обычный CSS.

Компилируем LESS файл

Хотя этот способ немного утомительней, но иногда он является более предпочтительным. Чтобы не конвертировать код при каждой загрузке страницы можно использовать результирующий CSS файл. Конвертеры: для Windows – Winless и LESS.app для Мака.

Укрощаем мощь LESS

Наконец давайте немного развлечемся – попишем LESS код. Как вы увидите код очень легко читать и понимать, так как используется сходный с CSS синтаксис.

Переменные

Переменные в LESS работают так же как в PHP, JS и в большинстве других языков программирования. Вы можете использовать их для хранения значения, и затем использовать переменные вместо самого значения всякий раз, когда вам это нужно.

/* Colors for my Website #ff9900 — Orange — used for links and highlighted items #cccccc — Light Gray — used for borders #333333 — Dark Black — Used for dark backgrounds and heading text color #454545 — Mid Black — Used for general text color */ body < background: #333333; color: #454545; >a < color:#ff9900; >h1, h2, h3, h4, h5, h6

Область видимости переменных

Область видимости переменных описывает места, где они доступны. Если вы определите переменную в самом начале LESS файла, то она будет доступна для любого кода написанного после.
Также можно определять переменную внутри CSS правила. В этом случае переменные не будут доступны вне этого правила, они могут быть использованы локально.

В этом примере LESS не будет сконвертирован из-за ошибки, color не определена для использования внутри элемента button. Если переменная объявлена вне элемента и внутри другого элемента, то она будет доступна только локально.

Здесь ссылка будет окрашена в белый, а у кнопки будет черный фон.

Переменные в переменных

Если вы кодили на PHP, то вы знаете что можно объявить имя переменной в другой переменной.

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

Константы и Переменные

Важно отметить, вопреки тому, что вы только что прочитали, переменные в LESS больше похожи на константы. Это значит, что они, в отличие от переменных, могут быть определены только один раз.

Операции

Вы можете добиться невероятно точного контроля с использованием операций в LESS. Идея проста:

.button

Код выше устанавливает переменную unit в 3px. Затем мы устанавливаем это значение в ширину рамки, отступы в три раза больше этой ширины, а поля – в два.
Можно использовать операции умножения, деления, сложения и вычитания. Что бы создать блок с рамкой увеличивающей ширину сторон по часовой стрелке, можно использовать следующий код:

Управление цветом

Моя любимая особе6нность LESS – управление цветом. Можно использовать операции для смешивания цветов и несколько специальных функций для работы с цветом.

Цветовые операции

Если вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета.

Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет “B64141″ — более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: “830E0E”.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.

Этот код создает красную кнопку с немного затемненной рамкой. Это частая ситуация и определение лишь одного цвета – большая помощь.

Другое замечательное применение этого – создание градиентов. Я обычно выбираю средний цвет и объявляю градиент исходя из него. Я делаю начало немного светлее и конец немного темнее. Результатом будет приятный переход, что-то вроде этого:

Цветовые функции

Есть гораздо больше возможностей для работы с цветом; LESS позволяет манипулировать ими на канальном уровне. Вы можете осветлять, затемнять, насыщать, обесцвечивать и вращать цвета. Взгляните на следующие примеры с картинками, чтобы понять, что каждый из них делает.

Извлечение информации о цвете

Каждый цвет в LESS конвертируется в HSL (hue, saturation, lightness), чтобы обеспечить вам контроль над уровнями каналов. Благодаря этому можно манипулировать цветами более тонко, а также получить информацию о цвете напрямую.

Это может показаться слишком мелочным – зачем нам нужна эта информация, когда мы можем просто ввести HEX значение? Если вы нормальный человек, то вы не сможете с ходу расшифровать HEX цвет. HEX значения отображают RGB спектр: первые два символа контролируют количество красного, следующие два — количество зеленого и последние два – количество синего.
Достаточно очевидно, что #ff0000 это красный, так как это RGB(255,0,0). Тона красного, никакого зеленого и синего. Тем не менее, если вы увидите #1f6b2d, то будет трудно декодировать, что это темно-зеленый. В HSL представлении hue (тон) управляет всем, вы могли бы просто назвать цвет, остальное просто задаст тон (это не совсем верно, но всё происходит именно так).
Имея это в виду, если вы нашли хороший пурпурный цвет как #e147d4, вы очень легко можете отыскать различные цвета с точно таким же оттенком. Скажем, вы хотите создать сливочную, более пастельную версию #e147d4, вот что можно сделать:

Новый цвет будет иметь тот же тон, но другие насыщенность и яркость. Результатом будет #c480bf, к которому гораздо труднее перейти от #e147d4 используя лишь HEX.

Совмещение функций

LESS позволяет использовать функции внутри функций, так, если надо обесцветить и перевернуть (spin) цвет, можно просто сделать так:

Вложенность

Во время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код:

article.post p

Нет ничего плохого в таком подходе, но если нам надо также изменить стиль ссылок, цитат, заголовков и т.д. только внутри статьи, нужно будет использовать префикс “article.post” для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.
В LESS мы можем вложить эти правила, что даст нам более короткую и логичную версию наших стилей. Например:

article.post < p< margin: 0 0 12px 0; >a < color: red; >a:hover < color: blue; >img < float:left; >>

Отступы не обязательны, но они делают код более читабельным. Уровни вложенности не ограничены.

a < color:red; >p < margin:0px; >article < a < color: green; >p < color: #555; a < color:blue; >> >

Примеси (mixins)

Примеси в LESS избавят вас от набора излишнего кода. Вам когда-нибудь приходилось создавать закругленную рамку в которой только верхние углы скругленны?

И так каждый раз… С LESS все это можно изменить, создав примесь. Примеси – элементы многоразового использования, которые можно добавить к любому элементу как правило. И даже не нужно изучать новый синтаксис.

.rounded_top < -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; >.tab < background: #333; color:#fff; .rounded_top; >.submit

В вышеприведенном коде мы определили элемент .rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите .tab) мы по существу импортируем правила, которые мы создали для него. Благодаря такому синтаксису мы можем использовать любой элемент в качестве примеси.

Примеси с параметрами

Примеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как мы можем определить элемент с радиусом в 6px на верхних углах. А если мы захотим создать элемент с радиусом в 3px? Мы должны объявлять разные примеси для всех пиксельных значений? Конечно же ответ нет, мы должны использовать примеси с параметрами!
Они сходны с функциями, потому что при их вызове можно менять значения. Давайте перепишем пример с border-radius, чтобы посмотреть, как это работает.

В вышеприведенном коде радиус у .tab равен 6px, а .submit элемент получит значение 3px.

Стандартные значения

Если вы обычно используете одинаковый border-radius, но иногда необходим другой, нужно задать примеси стандартное значение.

В этом примере .tab получит стандартное значение в 6px, а .submit – 3px.

Множественные параметры

Вы также можете использовать множественные параметры, чтобы определить более сложные примеси.

В этом примере класс .read_more отформатирован с отступом 4px, фоновым цветом #e7ba64 и с border-radius рывным 0px.

Используем все аргументы за раз

Еще одна опция при использовании аргументов это их объединение. Сокращённые свойства в CSS имеют множественные значения, записанные одно за другим.

Чтобы задать всем необходимым элементам серую границу, вы можете использовать такую функцию:

Параметрические примеси без параметров

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

.alert < background: red; color: white; padding:5px 12px; >.error_message

CSS вышеприведенного кода будет таким:

.alert < background: red; color: white; padding:5px 12px; >.error_message

Чтобы скрыть класс .alert нужно установить пустой параметр.

.alert() < background: red; color: white; padding:5px 12px; >.error_message

Готовый CSS будет следующим:

.error_message

В основном это используется для уменьшения размера CSS файла.

Пространство имён

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

#my_framework < p < margin: 12px 0; >a < color:blue; text-decoration: none; >.submit < background: red; color: white; padding:5px 12px; >>

Начиная работу над новым сайтом, основанным на вашем фреймворке, вы можете добавить связку #my_framework и использовать ее не засоряя пространство имён.

.submit_button < #my_framework >.submit; >

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

#fw_1 < p < margin: 12px 0; >a < color:blue; text-decoration: none; >.submit < background: red; color: white; padding:5px 12px; >> #fw_2 < p < margin: 8px 0; >a < color:red; text-decoration: underline; >.submit < background: blue; color: white; padding:8px 20px; >> .submit_button < #fw_2 >.submit; >

Строковая интерполяция

Строковая интерполяция это еще одно причудливое слово, означающее, что эта произвольная строка может храниться в переменной, а затем использоваться в значении свойства.

Это может быть полезно при создании централизованного фреймворка.

Экранирование

Иногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Вы могли заметить, что в примере про градиенты я не позаботился о пользователях Internet Explorer.
Если вы хотите создать градиент в IE, вы должны сделать что-то вроде этого:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#666666′, endColorstr=’#444444′);

Этот CSS не валиден, поэтому LESS не скомпилируется. В этом случае вы можете экранировать это значение, что позволит LESS пропустить его.

.button

Все что нужно сделать, это заключить секцию в кавычки и поставить тильду перед ней. Эта секция не пройдет через LESS процессор и не будет выкинута.

Импорт

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

Комметарии

Естественно, многострочные комментарии доступны в LESS в таком же виде, как и в CSS. Также LESS разрешает использование однострочных комментариев как в PHP или Javascript, с помощью двойного обратного слеша.

/* This is my main LESS file. It governs how most of the site looks. /* body < padding:0px; // This resets the body padding >

Чего не хватает?

Несмотря на то, что LESS восхитительный, всё же когда вы начнёте использовать его, обнаружатся некоторые недостатки, хотя они не очень беспокоят.
Одна из особенностей, которую я хотел бы видеть, это пре-пре-обработка (согласен, звучит это бессмысленно).Помните, как строки могут быть экранированы, чтобы не проходить через анализатор? Текущий способ не позволяет использовать градиенты с изменяемыми цветами.

filter: ~»progid:DXImageTransform.Microsoft.gradient(startColorstr=’#faa51a’, endColorstr=’#f47a20′)»;

Этот код прекрасно работает, но цвета должны быть жёстко определены. Если строчка экранирована, то переменные не обрабатываются. Было бы неплохо иметь опцию, в которой переменные в экранированных строках обрабатывались до отправки в CSS файл.

Заключение

Как и с любой новой технологией или методом возникает злоупотребление. Помните отражающиеся логотипы и «стеклянные» кнопки на заре Web 2.0 эры?
Вы не обязаны вкладывать все ваши правила, вы не должны создавать переменные для всего или примеси просто для ширины рамки.
Если вы не знаете когда не использовать потрясающую мощь LESS, ваш LESS код станет таким же нечитаемым как обычный CSS и таким же сложным для поддержки. Фокус в том, чтобы знать, когда использовать данные функции и методы, а когда обычный старый CSS лучше.
В дополнение я советую не использовать LESS файл. В этом нет ничего плохого, но нет причины загружать LESS файл и обрабатывать его. Несомненно, скрипт очень быстрый, но я уверен что без него будет быстрее. Я обычно разрабатываю все мои сайты с LESS, беру выходной файл, сжимаю его и использую обычный CSS файл.

Источник: habr.com