Препроцессор less что это

Less

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

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

Разработал Less Алексис Селье на языке Ruby, а затем под влиянием нарастающей популярности Node.js переписал код на JavaScript. Характерной особенностью Less стал синтаксис основанный на CSS. Это сразу же снизило порог вхождения и изучения новой технологии, к тому же не возникает никаких проблем с редакторами кода, они прекрасно поддерживают подсветку синтаксиса. В дальнейшем Less оказал своё влияние на препроцессор Sass, в котором появился новый похожий синтаксис. Но в целом, вопрос, кто на кого оказал влияние открыт, потому что многие полезные вещи были заимствованы друг у друга. Так что в настоящий момент и Less и Sass похожи как братья, различаясь лишь в деталях.

См. также

Официальный сайт Less: lesscss.org

• Комментарии в Less
• Переменные в Less
• Примеси
• Вложения в Less
• Компиляция Less

Препроцессор Less

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

Установка всего нужного

Самый быстрый способ начать работать с Less — установить специальную программу, которая будет компилировать Less в CSS формат. Бесплатными компиляторами для Windows являются программы WinLess http://winless.org/ и SimpLess http://wearekiss.com/simpless. По интерфейсу эти программы схожи, так что предпочтение можете отдать любой из них. Давайте воспользуемся WinLess и скачаем ее с сайта. Устанавливаем скачанный нами файл и открываем программу. Вот так выглядит интерфейс нашего с вами компилятора:

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

Работа с Less

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

Значит, все исправно и наш компилятор прекрасно справился с работой.

Теперь рассмотрим некоторые тонкости Less.

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

Вы можете увидеть, что в less-файле мы использовали общее название класса только один раз, в отличии от css. Вложенными элементами называются те элементы, которые находятся внутри скобок родительского элемента. Так что, элементы внутри нашего списка ul будут вложенными.

Давайте рассмотрим особенности использования переменных в Less. Чтобы объявить переменную, нужно поставить знак @, после написать само имя переменной и через двоеточие присвоить ей значение.

@variable : red;
 

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

 @variable : red; body background-color: @variable; 
> 
header background-color: @variable; 
> 

Если вы укажите переменную в вашем less-файле, компилятор в css вместо переменных покажет вам красный цвет. Переменную можно заменить или перезаписать. Приоритет будет иметь то значение, которое указано ниже в вашем коде. Так же в Less не имеет значения где вы указываете переменную, будь то начало кода или конец, до ее объявления или после. И так и так все будет работать.

Также, с переменными можно совершать арифметические операции, например:

@width: 100px;
 
@height: @width/4;
 
header 
width: @width;
 
height: @height;
 
>
 

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

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

CSS-препроцессоры

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

Определение

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

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

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

При помощи препроцессоров вы можете писать код, который нацелен на:

• Читабельность для человека
• Структурированность и логичность
• Производительность

И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.

Синтаксический сахар

Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».

Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.

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

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

Какие бывают CSS-препроцессоры?

Пора перейти к более конкретным примерам, а именно к самим CSS-препроцессорам. На момент написания книги можно выделить три популярных препроцессора:

И несколько незначительных для нас игроков:

• Closure Stylesheets
• CSS Crush

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

Какой смысл использования препроцессоров?

Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.

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

CSS — это сложно

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

Доступная документация

Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.

Простота использования

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

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

Структура и логичность кода

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

1. Родительский селектор 1.1. Вложенный селектор 1.2. Вложенный селектор 1.2.1. Вложенный селектор 1.3. Вложенный селектор 

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

Примеси

Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.

Модульность

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

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

Почему бы не подождать развития CSS?

Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.

В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.

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

Разновидности препроцессоров

Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:

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

Для полной картины, я хочу привести краткую справку по каждому препроцессору:

Less

Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.

Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

• Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, который основан на идентации. Считается устаревшим.
• SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

Stylus

Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют : , ; , <> и некоторые скобки).

results matching » «

No results matching » «

Препроцессор CSS LESS. Изучаем LESS чтобы ускорить версктку сайта и веб-страниц.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов. Постепенно в рубрику верстка сайтов будут переноситься статьи из других разделов так или иначе связанных с версткой и, конечно, эти статьи будут корректироваться и редактироваться в процессе переноса, так как информации на моем сайте достаточно много на тему верстки, но подана информация не самым лучшим образом, как минимум, не систематизирована. И еще данная статья начинает раздел Препроцессор LESS, в котором мы подробно изучим все возможности препроцессора LESS, а возможно, попробуем сделать HTML шаблон с LESS.

Что такое LESS? Обзор CSS препроцессора LESS

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

Что такое CSS препроцессор LESS?

LESS – это препроцессор CSS, который очень сильно ускоряет оформление HTML страниц сайта при помощи таблицы стилей CSS. Препроцессор LESS – представляет собой язык (отчасти напоминающий язык программирования, но намного проще), который значительно расширит ваши возможности при написании CSS кода.

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

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

CSS препроцессор LESS разработан на языке JavaScript, поэтому файлы LESS можно использовать на сайте, компилятор будет отдавать браузеру переваренные в CSS файлы, а на самом деле на вашем сервере будет лежать файл с расширением .less.

Надеюсь, вы разобрались с тем, что такое препроцессор LESS и, думаю, что осознали его преимущества, если нет, то пойдем далее.

Как расширяет препроцессор LESS возможности CSS кодирования

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

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

Вложенные директивы препроцессора LESS позволяют сократить написание CSS кода на треть, а иногда и больше, согласитесь, лучше написать 10 строчек, чем 15.

Математические операторы поддерживаются препроцессором LESS, что бывает очень удобно при верстки адаптивных макетов сайта.

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

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

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

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

LESS поддерживает еще и комментарии.

В LESS есть расширения, вернее будет сказать наследование, это когда один элемент может наследовать стили другого элемента.

В препроцессоре LESS есть переменные, которые дают кучу возможностей по сокращению CSS кода.

В LESS есть миксины или примеси: мы просто стили одного элемента можем добавить (примешать, смешать) со стилями другого элемента, чтобы не дублировать код. Это похоже на наследование классов в ООП.

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

Чего нет, того нет, в LESS нет операторов условия, но есть охранники. Guards в LESS чем-то похожи на языковую конструкцию if.

Циклы в LESS есть и их даже используют и, стоит сказать, что циклы в LESS могут значительно вам помочь при написании CSS кода.

В LESS есть слияние, которое используется для объединения двух разных правил CSS в одно.

В LESS очень много встроенных функций, о которых мы будем говорить и которые мы будем рассматривать подробно далее.

В CSS часто можно встретить селекторы, имена которых состоят из 5-6 слов, а есть селекторы с эквивалентными именами, но состоящие не из 5, а из трех или четырех слов, обычно такие селекторы пишутся для вложенных элементов, чтобы не писать имя класса из 5-6 слов препроцессор LESS реализует дочерние селекторы.

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

Преимущества и недостатки LESS

Давайте сперва поговорим о преимуществах, которые есть у LESS:

1. LESS файлы быстро компилируются в CSS, который понятен браузеру, при этом компиляция LESS происходит значительно быстрее, чем у других CSS препроцессоров.
2. За счет того, что у LESS есть вложенные правила, ваш код будет более читабельным и удобным для редактирования.
3. Изменения в шаблоны сайтов с LESS происходят быстрее, так как повторяющиеся значения можно присваивать переменным.
4. В LESS поддерживается наследование и повторное использование стилей одного класса в другом, что сокращает ваш код в разы.
5. Изучив LESS, вы сможете намного быстрее верстать HTML шаблоны, за счет того, что код будет в разы короче.
6. У LESS много других преимуществ и вы их поймете, когда его изучите.

А теперь давайте перечислим недостатки препроцессора LESS:

1. Изучать LESS стоит начинать только в том случае, когда вы довольно сносно знаете CSS, хотя изучение можно проводить параллельно.
2. Код LESS все-таки приходится тестировать после написания, даже у опытного разработчика LESS могут возникать кое-какие трудности.
3. Фрейморков, использующих LESS, меньше, чем фреймворков, использующих SASS.

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

Еще записи о создании сайтов и их продвижении, базах данных, IT-технология и сетевых протоколах

• Что такое SASS и SCSS? Обзор препроцессора SASS. Разница между SASS и SCSS
• Что такое HTTP протокол
• Что такое PHP? Для чего используют язык программирования PHP?
• Что такое клиент? Клиентский компьютер и клиентское приложение
• Что такое сервер? Серверный компьютер и серверное приложение
• Часть 1.1: Что такое SQLite? Первое знакомство с библиотекой SQLite3
• Установка LESS на Windows 10. LESS компиляторы, онлайн компиляция LESS в CSS
• #003 Обзор интерфейса управления виртуальной машиной VirtualBox

Возможно, эти записи вам покажутся интересными

Related Posts

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел…

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел Препроцессор SASS и SCSS. Мы рассмотрели не…

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел…