Файл less что это
Теперь, когда мы закончили рассмотрение SASS, давайте поговорим о LESS. Если вы еще не читали мою статью по SASS, вы можете найти ее здесь.
В своей предыдущей статье я перечислил недостатки CSS и рассказал, как с помощью методов предварительной подготовки можно оптимизировать рабочий процесс.
Мы также говорили о том, как реализовать SASS с помощью переменных, вложенных элементов, примесей, функций и так далее.
Так что, теперь мы готовы приступить к изучению еще одного метода предварительной обработки - LESS.
Установка SimpleLESS
В качестве LESS компилятора на стороне клиента я буду использовать SimpleLESS , потому что он прост в использовании, и это бесплатное приложение. Так что, перейдите по ссылке , скачайте и запустите его.
При первом запуске SimpleLESS вы увидите что-то вроде изображения приведенного ниже. Пожалуйста, обратите внимание - если в верхней строке вы не видите текущую версию, это означает, что приложение не работает должным образом.
В этом случае вам необходимо скачать его заново.
Примеси LESS
Иногда нам нужно создать стили, которые могут повторяться по всей таблице стилей. В этом нам могут помочь примеси.
Так же, как и SASS, LESS поддерживает возможность добавлять каждый элемент неоднократно, но без необходимости использовать директиву @include . Вместо этого, ему достаточно всего лишь одной простой директивы класса стилей.
Чтобы понять, как в LESS работают примеси, давайте рассмотрим следующий код:
Как вы можете видеть, я создал примесь, которая называется sample-mixin , и добавил ее в тег H1 и параграф с ID myParagraph .
Если вы запустите документ в браузере, результат будет подобен тому, что показано на рисунке ниже:
Математические функции
С помощью этих функций вы можете использовать числа в своем коде. Среди этих функций можно выделить round() , ceil() , floor() и percentage() . Передавая числа в эти функции, вы сможете получить округленные числа, числа, округленные по большему и по меньшему значению, а также числа в процентном выражении.
Примеси с параметрами
Примеси с параметрами почти такие же, как и обычные, но сродни функциям они могут принимать параметры для использования внутри примеси:
Результат выглядит следующим образом:
Мы также можем выставить значения по умолчанию для параметров:
Что в результате дает:
При работе с CSS3 можно использовать библиотеку LESS ELements, чтобы облегчить свою работу. LESS Elements является коллекцией общих примешиваний CSS3, которые часто используются в стилях, например, border-radius , gradients , drop-shadow и так далее.
Чтобы использовать LESS нужно просто добавить правило @import файл LESS. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.
Теперь можно использовать все классы из elements.less . Например, чтобы добавить скругление углов рамки с радиусом 3px к элементу div , нужно написать:
Использование LESS
Использовать LESS очень просто. Нужно просто добавить две строки в тег head вашего документа HTML. Первая строка содержит название вашего файла LESS, а вторая строка — подключение библиотеки less.js, которую можно скачать с официального сайта.
Теперь LESS файл будет работать также как и обычный CSS.
Этот метод работает только в современных браузерах и подходит для использования на локальном сервере. Для рабочего сайта необходима предварительная компиляция на веб-сервере или различные инструменты от сторонних производителей.
Примеси (mixins)
В LESS можно использовать примеси для хранения набора правил и применения их в других наборах. Например:
В выше приведенном примере мы устанавливаем цвет градиента в классе .gradient . Затем, когда нужно добавить градиент, нужно просто вставить .gradient следующим образом:
Класс .box наследует все объявления из .gradient . Поэтому выше приведенное выражение LESS эквивалентно следующему обычному коду CSS:
Переменные LESS
Как и SASS, LESS также использует переменные. Если вы до этого занимались составлением кода, вы знаете, насколько использование переменных упрощает любой процесс.
В рамках предварительной обработки, наподобие той, что осуществляет LESS, переменные используются для заполнения значений каждого из стилей, применяемых в файле LESS.
Для определения переменной LESS использует знак @. Давайте посмотрим на практике, как это работает.
Откройте файл LESS и вставьте в него следующий код. Для этого кода я создал 3 переменные для цвета, размера шрифта и рамки.
Я добавил переменные myColor и myFontSize в тэг H1, переменную myBorder я добавил в список идентификаторов myList :
Теперь, если вы откроете файл style.css , вы увидите, что код был обновлен. Идем дальше, запускаем этот код через адресную строку браузера.
Вы увидите что-то похожее на то, что приведено на рисунке ниже:
Вариант CSS
Подготовка разметки и LESS Javascript
Прежде, чем мы приступим к рассмотрению функционала LESS, нам нужно подготовить разметку и файлы LESS. Поэтому создайте новую папку и назовите ее « LESS » или по-другому на ваше усмотрение.
Далее внутри папки LESS создайте HTML-файл, назовите его index.html , скопируйте и вставьте в него приведенный ниже код.
Обратите внимание, что мы включили библиотеку LESS ниже таблицы стилей:
Затем создайте новый файл и назовите его style.less . Чтобы вы могли увидеть, как компилируется LESS, давайте добавим в этот файл несколько примеров кодов LESS. Идем дальше.
Скопируйте и вставьте следующий код в файл style.less :
На данный момент у вас должна получиться структура файла наподобие этой:
Функции LESS
LESS предоставляет большое количество функций для обработки элементов и стилей. В этой статье мы рассмотрим функции цвета, если вы хотите узнать больше обо всех функциях LESS, вы можете перейти по ссылке.
Ниже приводится список функций цвета LESS:
- darken (цвет, значение);
- lighten (цвет, значение);
- saturate (цвет, значение);
- desaturate (цвет, значение);
- alpha (цвет)
Давайте попробуем поработать с некоторыми из этих функций. Откройте файл style.less и скопируйте в него следующие коды:
Как видите, цвет фона был затемнен на 60%, а затем цвет текста тегов H1 и H2 стал светлее на 10%, а цвет текста тегов абзаца стал светлее на 20%.
Когда вы запустите данный код в браузере, то получите результат аналогичный, тому, что приведен на рисунке ниже:
Вложенные правила LESS
В LESS аналогично SASS применяются вложенные правила для идентификаторов и классов. Это позволяет поддерживать чистоту и организацию кода.
Чтобы показать их работу на практике, я создал пример CSS-кода и соответствующий ему вариант LESS.
Область видимости (scope)
LESS использует концепцию области видимости. Сначала используются переменные из локального контекста, а если их нет, то происходит поиск в более широкой области видимости.
В приведенном примере header имеет переменную для цвета со значением black , но фон элемента nav будет иметь цвет blue , так как переменная @color находится в локальном контексте.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
LESS в двух словах
LESS - это язык динамических таблиц стилей, который расширяет CSS и, также как и SASS, характеризуется динамическим поведением, примером чего могут служить переменные, примеси, операции и функции.
Это позволяет составлять CSS-код более просто, используя только примеси, функции, другие динамические элементы и их комбинации. LESS также позволяет повысить читаемость и организацию CSS-кода с помощью импорта, вложенных правил и комментариев с расширением .less .
LESS работает и на стороне клиента ( IE , Firefox и т.д.), и на стороне сервера, используя Node.js . В этой статье мы рассмотрим клиентскую сторону. Так что, просто сядьте как можно удобнее, расслабьтесь и наслаждайтесь уроком.
Что вам понадобится для выполнения заданий данного урока:
- LESS библиотека ;
- SimpLESS для Mac/Windows (компилятор на стороне клиента);
- Текстовый редактор;
- Время и терпение.
Вложенные правила (nesting)
При работе с обычным CSS кодом, достаточно часто встречается следующая структура кода:
В обычном CSS коде мы выбираем наследников, указывая родителя в каждом наборе правил. В LESS можно улучшить выше приведенный набор правил с помощью вложения наследников в родительский элемент:
Также можно использовать псевдо-классы, например :hover , с помощью символа амперсенда & . Допустим, мы хотим добавить :hover к тегу ссылки:
Переменные
При работе с CSS вы вероятно часто сталкивались с ситуацией, когда повторяющееся значение устанавливалось в нескольких блоках по всей таблице стилей.
Все прекрасно, пока не придется просеивать 1000 одинаковых участков кода по всей таблице стилей, чтобы поменять значение. При использовании препроцессора LESS такая проблема легко решается с помощью переменных. Переменные позволяют хранить значения, которые можно многократно использовать в таблице стилей.
В переменной можно использовать и другие значения:
Компиляция LESS помощью SimpLESS
Для компиляции LESS файла в CSS, запустите приложение SimpLESS и перетащите папку « LESS », которую мы создали раньше, в окно приложения:
Если в списке появилась папка, которую мы перетаскивали, значит она была успешно добавлена в приложение.
Обратите внимание, что в окне приложения будет выведена текстовая информация, которая уведомляет вас о том, был ли файл скомпилирован или нет.
В моем примере, как вы можете видеть в правом углу текст гласит « never compile ». Это означает, что наша папка LESS никогда не компилировалась:
Приложение также предлагает нам на выбор различные функции, а именно: Prefix , Minify , Love . Вы можете видеть их в правом углу окна под оповещением о статусе.
Пожалуйста, обратите внимание, что все эти функции могут включаться или выключаться индивидуально.
Давайте рассмотрим их использование:
- Prefix - позволяет обеспечить совместимость с различными браузерами с помощью префиксов;
- Minify - сжимает ваш CSS документ, с помощью встроенного CSS-минификатора;
- Love - функция комментирует или извещает о состоянии SimpLESS для вашего документа.
Теперь давайте скомпилируем наш файл LESS в CSS. Для этого нужно просто нажать на иконку « Обновить » в левом углу окна приложения SimpLESS :
Пожалуйста, обратите внимание, что пока приложение запущено, оно будет отслеживать все обновления, которые вы совершаете для файлов в папке LESS:
Так что, когда вы откроете папку LESS, вы увидите, что в нее был добавлен файл CSS.
Убедитесь, что вы привязали скомпилированный файл CSS ( style.css ) к файлу index.html , чтобы добавились стили, которые вы задали через LESS:
Вариант LESS
Как видите, мы организовали наши стили с помощью LESS, и нам не пришлось повторять идентификатор container несколько раз.
Если вы запустите приведенные выше коды в браузере, то увидите аналогичные результаты.
Синтаксис LESS
В отличие от обычного CSS, LESS больше похож на язык программирования. Он динамический, поэтому логичного ожидать использования в нем переменных, операций и области видимости.
Заключительное слово
Библиотека LESS предлагает для дизайнеров и разработчиков много фантастических возможностей. В этой статье представлено только общее описание системы.
Вы можете поэкспериментировать с представленными в статье кодами, после чего я хотел бы услышать о том, что у вас получилось, и увидеть результаты ваших экспериментов.
Всегда приветствуются пожелания, замечания и советы. Надеюсь, вам понравился этот урок, увидимся в следующий раз.
Вчера пол дня потратил на подробное изучение LESS и его отличие от используемых нами SASS/SCSS.
Синтаксис SASS мне импонирует больше чем SCSS за его краткость. Но большая вложенность стилей в SASS может быстро ликвидировать все преимущества его краткости. В любом случае разницу между SASS и SCSS не принципиальна. LESS оказался ближе к SCSS чем к SASS. И, в общем, это тоже самое. Отличий не много, но парочка из них принципиально меняют расстановку сил.
1. LESS — может client-side с использованием JS.
Точнее он не то чтобы может, он на это и расчитан. Обычная практика использования LESS-кода:
Это потом уже к нему прикрутили возможность компиляции на сервере (и на js и на ruby).
На первый взгляд какое-то странное свойство. Зачем компилить на стороне клиента, если можно отлично скомпилить на сервере и отдавать уже готовую ужатую CSS как мы привыкли с SASS?
Причина становится видна после изучения невзрачных самых послених строках документации к LESS:
Вот такая маленькая одинокая строчка дает возможности о которых только мечтали верстальщики с начала освоения стилей. Вызов из CSS ява-скрипта на стороне клиента и учет фактических параметров браузера при создании стилей.
Тоесть у нас появилась возможность сначала загрузить DOM, а потом под него создать специальный CSS прямо на стороне клиента. Дальше сами думаейте какие возможности этот открывает.
Нужно ли это вашему проекту это вопросу другой. Понятно что все привыкли к клиентской неизвестности/независимости и верстке в стиле «делаем универсально, чтобы более-менее показывалось у всех на всех разрешениях». Но это не повод забывать что теперь такая возможность есть и с ней вы можете делать, к примеру, ну очень резиновую верстку.
2. LESS, в отличии от SASS/SCSS не имеет логики.
В LESS нет if/then, for и т.п. Хотя, учитывая то, что в него легко встраивается JS думаю логику вполне возможно прикрутить. Не пробовал.
3. В LESS проще миксинг + миксить можно классы.
Очень понравилось то, что в LESS можно включать в определение свойства других классов. Собственно класс и является миксином. Это еще одна особенность которой нет в SASS/SCSS. Вы можете включить в LESS обычный CSS файл и использовать его классы для определия своих свойств. Например:
.wrap text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
>
pre < .wrap >
Резюме
За исключением 1-го пункта разница не велика и выбор большена любителя.
Лично для меня LESS выглядит более привлекательным из-за своей простоты. Циклы и условия в стилях мне еще никогда не были нужны. Классические утилиты типа «box-shadow, linear-gradient, darken' в LESS есть.
Да, под SASS написано уже множество готовых библиотек (compass, bourbone и достаточно широкое сообщество), но под LESS есть тот же Twitter Bootstrap и этого более чем достаточно.
Приветствую всех! Меня зовут Сергей, я живу в Самаре, мне 37 и я бородат, но только тогда, когда сила созидания побеждает во мне все остальные физиологические процессы… Сегодня я поделюсь с вами своим опытом практического использования LESS. Что уж говорить, LESS моден и, как известно, в IT среде используется всеми, кому не лень… иногда даже вопреки здравому смыслу.
Но мы немного отвлеклись и, в общем, суть не в этом.
Итак, Less.
Less расширяет возможности CSS, поскольку позволяет задавать переменные, примешивания и т.д.
– Так?
Ну, то есть каждый сейчас согласился со мной?
… так и слышу миллионный хор.
Но по факту решение имеет и минусы.
Многие сторонники языка говорят, например, о таком использовании.
Задаем переменную цвета:
Дальше используем ее в элементах:
С точки зрения сторонников языка это удобно: чтобы поменять цвет всех элементов — изменил цвет в одном месте — и все.
Казалось бы, плюсы?
Вот где действительно есть плюсы (как мне изначально показалось), так это в примешивании, когда в одну переменную задается огромное количество параметров (например, вендорные свойства а-ля . ), а потом эта переменная включается-примешивается внутрь используемых элементов — сильно сокращается код.
Но задам вам вопрос: зачем сокращать код, когда он все-равно компилируясь раскрывается и развертывается до разобранного CSS-состояния? По факту получаем некую прослойку (иногда состоящую из множества файлов) непонятно для чего, которая тормозит поиск параметра, а на окончательный вид кода никак не влияет.
По-настоящему эффективен less может быть если год-два проводить общий рефакторинг кода, тогда да — наверное имеет смысл… Но даже тогда, на первый взгляд настоящие плюсы — на поверку, всего лишь фикция и трата драгоценного времени… Спросите, почему?
Ответ: потому что это не полноценный язык и на выходе мы получаем все те же громоздкие конструкции CSS. То есть как бы мы не пытались сократить или оптимизировать — оптимизируем только прослойку.
Возможно Less вообще — маркетинговый ход, модный тренд, некий тайный сговор для раскрутки языка — часто слышу от программистов (некоторых программистов), что использование less — это банальная заточка проекта под программерское абстрактное мышление. Хотя чем программерское абстрактное мышление отличается от вообще абстрактного мышления или чем лучше оно от абстрактного мышления верстальщика / дизайнера — великая тайна, покрытая мраком.
Как теперь я обозначаю для себя 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 и в большинстве других языков программирования. Вы можете использовать их для хранения значения, и затем использовать переменные вместо самого значения всякий раз, когда вам это нужно.
В примере выше мы объявляем переменную @header-font и записываем туда значение «Georgia». Теперь мы можем использовать эту переменную всегда, когда мы хотим установить шрифт Georgia. Если же мы решим, что Trebuchet MS лучше подходит для наших заголовков, то нам не нужно будет просматривать весь файл, мы просто изменим значение переменной.
Я нашел отличное применение переменным в определении цветов сайта. В старые добрые времена (которые были не так давно) я использовал что-то вроде этого:
Область видимости переменных
Область видимости переменных описывает места, где они доступны. Если вы определите переменную в самом начале LESS файла, то она будет доступна для любого кода написанного после.
Также можно определять переменную внутри CSS правила. В этом случае переменные не будут доступны вне этого правила, они могут быть использованы локально.
В этом примере LESS не будет сконвертирован из-за ошибки, color не определена для использования внутри элемента button. Если переменная объявлена вне элемента и внутри другого элемента, то она будет доступна только локально.
Здесь ссылка будет окрашена в белый, а у кнопки будет черный фон.
Переменные в переменных
Если вы кодили на PHP, то вы знаете что можно объявить имя переменной в другой переменной.
Лично я почти не использую это, так как переменные в переменных почти бесполезны без замыканий, но я уверен, что найдутся умные примеры использования этого.
Константы и Переменные
Важно отметить, вопреки тому, что вы только что прочитали, переменные в LESS больше похожи на константы. Это значит, что они, в отличие от переменных, могут быть определены только один раз.
Операции
Вы можете добиться невероятно точного контроля с использованием операций в LESS. Идея проста:
Код выше устанавливает переменную unit в 3px. Затем мы устанавливаем это значение в ширину рамки, отступы в три раза больше этой ширины, а поля – в два.
Можно использовать операции умножения, деления, сложения и вычитания. Что бы создать блок с рамкой увеличивающей ширину сторон по часовой стрелке, можно использовать следующий код:
Управление цветом
Моя любимая особе6нность LESS – управление цветом. Можно использовать операции для смешивания цветов и несколько специальных функций для работы с цветом.
Цветовые операции
Если вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета.
Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет “B64141″ — более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: “830E0E”.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.
Этот код создает красную кнопку с немного затемненной рамкой. Это частая ситуация и определение лишь одного цвета – большая помощь.
Мощь переменных более очевидна в следующем. Если вы захотели изменить цвет кнопки, то изменение значения @color-button на зеленый цвет, поменяет не только фоновый цвет, но и заменит обводку на более темный вариант зеленого.
Другое замечательное применение этого – создание градиентов. Я обычно выбираю средний цвет и объявляю градиент исходя из него. Я делаю начало немного светлее и конец немного темнее. Результатом будет приятный переход, что-то вроде этого:
Цветовые функции
Есть гораздо больше возможностей для работы с цветом; LESS позволяет манипулировать ими на канальном уровне. Вы можете осветлять, затемнять, насыщать, обесцвечивать и вращать цвета. Взгляните на следующие примеры с картинками, чтобы понять, что каждый из них делает.
Извлечение информации о цвете
Каждый цвет в LESS конвертируется в HSL (hue, saturation, lightness), чтобы обеспечить вам контроль над уровнями каналов. Благодаря этому можно манипулировать цветами более тонко, а также получить информацию о цвете напрямую.
Совмещение функций
LESS позволяет использовать функции внутри функций, так, если надо обесцветить и перевернуть (spin) цвет, можно просто сделать так:
Вложенность
Во время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код:
Нет ничего плохого в таком подходе, но если нам надо также изменить стиль ссылок, цитат, заголовков и т.д. только внутри статьи, нужно будет использовать префикс “article.post” для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.
В LESS мы можем вложить эти правила, что даст нам более короткую и логичную версию наших стилей. Например:
Отступы не обязательны, но они делают код более читабельным. Уровни вложенности не ограничены.
Примеси (mixins)
Примеси в LESS избавят вас от набора излишнего кода. Вам когда-нибудь приходилось создавать закругленную рамку в которой только верхние углы скругленны?
И так каждый раз… С LESS все это можно изменить, создав примесь. Примеси – элементы многоразового использования, которые можно добавить к любому элементу как правило. И даже не нужно изучать новый синтаксис.
В вышеприведенном коде мы определили элемент .rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите .tab) мы по существу импортируем правила, которые мы создали для него. Благодаря такому синтаксису мы можем использовать любой элемент в качестве примеси.
Примеси с параметрами
Примеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как мы можем определить элемент с радиусом в 6px на верхних углах. А если мы захотим создать элемент с радиусом в 3px? Мы должны объявлять разные примеси для всех пиксельных значений? Конечно же ответ нет, мы должны использовать примеси с параметрами!
Они сходны с функциями, потому что при их вызове можно менять значения. Давайте перепишем пример с border-radius, чтобы посмотреть, как это работает.
В вышеприведенном коде радиус у .tab равен 6px, а .submit элемент получит значение 3px.
Стандартные значения
Если вы обычно используете одинаковый border-radius, но иногда необходим другой, нужно задать примеси стандартное значение.
В этом примере .tab получит стандартное значение в 6px, а .submit – 3px.
Множественные параметры
Вы также можете использовать множественные параметры, чтобы определить более сложные примеси.
Используем все аргументы за раз
Еще одна опция при использовании аргументов это их объединение. Сокращённые свойства в CSS имеют множественные значения, записанные одно за другим.
Чтобы задать всем необходимым элементам серую границу, вы можете использовать такую функцию:
@arguments это специальное ключевое слово, которое выводит все параметры один за другим в заданном порядке. Результатом вышеприведённого LESS кода будет:
Параметрические примеси без параметров
Также можно использовать параметрические примеси без параметров. Это используется тогда, когда вам не нужно выводить примесь в CSS, но вы хотите чтобы ее правила применялись к элементу в котором она используется.
CSS вышеприведенного кода будет таким:
Чтобы скрыть класс .alert нужно установить пустой параметр.
Готовый CSS будет следующим:
В основном это используется для уменьшения размера CSS файла.
Пространство имён
Пространство имён в языках программирования обычно используется для группировки сходных по функциональности элементов. Мы можем добиться подобного в LESS, объединяя наш код с помощью примесей.
Также это отличный способ сделать возможным быструю смену и доработку тем. Если вы разрабатываете несколько тем для вашей компании, то для смены шаблонов на лету, вы можете поместить их все в один LESS файл, используя связки.
Строковая интерполяция
Строковая интерполяция это еще одно причудливое слово, означающее, что эта произвольная строка может храниться в переменной, а затем использоваться в значении свойства.
Это может быть полезно при создании централизованного фреймворка.
Экранирование
Иногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Вы могли заметить, что в примере про градиенты я не позаботился о пользователях Internet Explorer.
Если вы хотите создать градиент в IE, вы должны сделать что-то вроде этого:
Этот CSS не валиден, поэтому LESS не скомпилируется. В этом случае вы можете экранировать это значение, что позволит LESS пропустить его.
Все что нужно сделать, это заключить секцию в кавычки и поставить тильду перед ней. Эта секция не пройдет через LESS процессор и не будет выкинута.
Импорт
Как и в обычном CSS вы можете импортировать файлы. LESS позволяет импортировать CSS и LESS используя следующий синтаксис:
Первый импорт достаточно очевиден. Он импортирует CSS правила определённые в reset.min.css без обработки их LESS парсером.
Второй импорт вставит содержание framework.less и обработает его как любые другие LESS правила.
Третий импорт работает также как и второй. Если расширение не установлено, то препроцессор считает его LESS файлом.
Комметарии
Естественно, многострочные комментарии доступны в LESS в таком же виде, как и в CSS. Также LESS разрешает использование однострочных комментариев как в PHP или Javascript, с помощью двойного обратного слеша.
Чего не хватает?
Несмотря на то, что LESS восхитительный, всё же когда вы начнёте использовать его, обнаружатся некоторые недостатки, хотя они не очень беспокоят.
Одна из особенностей, которую я хотел бы видеть, это пре-пре-обработка (согласен, звучит это бессмысленно).Помните, как строки могут быть экранированы, чтобы не проходить через анализатор? Текущий способ не позволяет использовать градиенты с изменяемыми цветами.
Этот код прекрасно работает, но цвета должны быть жёстко определены. Если строчка экранирована, то переменные не обрабатываются. Было бы неплохо иметь опцию, в которой переменные в экранированных строках обрабатывались до отправки в CSS файл.
Заключение
Как и с любой новой технологией или методом возникает злоупотребление. Помните отражающиеся логотипы и «стеклянные» кнопки на заре Web 2.0 эры?
Вы не обязаны вкладывать все ваши правила, вы не должны создавать переменные для всего или примеси просто для ширины рамки.
Если вы не знаете когда не использовать потрясающую мощь LESS, ваш LESS код станет таким же нечитаемым как обычный CSS и таким же сложным для поддержки. Фокус в том, чтобы знать, когда использовать данные функции и методы, а когда обычный старый CSS лучше.
В дополнение я советую не использовать LESS файл. В этом нет ничего плохого, но нет причины загружать LESS файл и обрабатывать его. Несомненно, скрипт очень быстрый, но я уверен что без него будет быстрее. Я обычно разрабатываю все мои сайты с LESS, беру выходной файл, сжимаю его и использую обычный CSS файл.
CSS — простой и доступный инструмент. Однако, он имеет свои ограничения, особенно когда встает вопрос о сопровождении готового кода. Когда нужно модифицировать тысячи строк со стилями, разделенных по нескольким файлам, задача становится проблемой. Для преодоления проблемы созданы препроцессоры CSS, которые позволяют комбинировать стили динамически. Существует несколько вариантов (например, LESS и SASS), сегодня мы рассмотрим LESS.
Операторы LESS
Одной из самых полезных возможностей LESS является поддержка выполнения математических операций. Используя фиксированное значение стиля, вы можете добавлять, вычитать, умножать или даже делить его.
Давайте рассмотрим, как это работает:
Как вы видите, к базовому значению рамки в 5 пикселей я добавил еще 5 пикселей, а затем задал ее цвет. Базовый отступ в 90 пикселей я разделил на 3, и в результате получил отступ в 30 пикселей.
Если вы запустите этот код в браузере, то увидите следующий результат:
Операции с цветом
Операции, которые мы продемонстрировали выше, могут быть использованы для управления цветом. Цвета можно создавать и управлять ими посредством математики:
И скомпилированный код выглядит следующим образом:
Это еще не все, что LESS может делать с цветами. Все становится намного интереснее, когда речь заходит о встроенных функциях для работы с цветом:
Операции
Также можно использовать операции в LESS. Доступны сложение, вычитание, умножение и деление.
Допустим, что элемент B в два раза выше элемента A :
Сначала мы определяем переменную @height и назначаем ее для указания высоты элемента А . В элементе В мы просто умножаем значение переменной на 2 . Теперь, когда мы изменяем значение переменной @height , элемент В всегда будет в два раза выше.
Читайте также: