Файл less что это
Обновлено: 03.07.2024
Теперь, когда мы закончили рассмотрение SASS, давайте поговорим о LESS. Если вы еще не читали мою статью по SASS, вы можете найти ее здесь.
В своей предыдущей статье я перечислил недостатки CSS и рассказал, как с помощью методов предварительной подготовки можно оптимизировать рабочий процесс.
Мы также говорили о том, как реализовать SASS с помощью переменных, вложенных элементов, примесей, функций и так далее.
LESS в двух словах
Это позволяет составлять CSS-код более просто, используя только примеси, функции, другие динамические элементы и их комбинации. LESS также позволяет повысить читаемость и организацию CSS-кода с помощью импорта, вложенных правил и комментариев с расширением .less .
LESS работает и на стороне клиента ( IE , Firefox и т.д.), и на стороне сервера, используя Node.js . В этой статье мы рассмотрим клиентскую сторону. Так что, просто сядьте как можно удобнее, расслабьтесь и наслаждайтесь уроком.
Что вам понадобится для выполнения заданий данного урока:
- LESS библиотека ;
- SimpLESS для Mac/Windows (компилятор на стороне клиента);
- Текстовый редактор;
- Время и терпение.
Установка SimpleLESS
В качестве LESS компилятора на стороне клиента я буду использовать SimpleLESS , потому что он прост в использовании, и это бесплатное приложение. Так что, перейдите по ссылке , скачайте и запустите его.
В этом случае вам необходимо скачать его заново.
Подготовка разметки и LESS Javascript
Прежде, чем мы приступим к рассмотрению функционала LESS, нам нужно подготовить разметку и файлы LESS. Поэтому создайте новую папку и назовите ее « LESS » или по-другому на ваше усмотрение.
Далее внутри папки LESS создайте HTML-файл, назовите его index.html , скопируйте и вставьте в него приведенный ниже код.
Обратите внимание, что мы включили библиотеку LESS ниже таблицы стилей:
Затем создайте новый файл и назовите его style.less . Чтобы вы могли увидеть, как компилируется LESS, давайте добавим в этот файл несколько примеров кодов LESS. Идем дальше.
Скопируйте и вставьте следующий код в файл style.less :
На данный момент у вас должна получиться структура файла наподобие этой:
Компиляция LESS помощью SimpLESS
Для компиляции LESS файла в CSS, запустите приложение SimpLESS и перетащите папку « LESS », которую мы создали раньше, в окно приложения:
Если в списке появилась папка, которую мы перетаскивали, значит она была успешно добавлена в приложение.
Обратите внимание, что в окне приложения будет выведена текстовая информация, которая уведомляет вас о том, был ли файл скомпилирован или нет.
В моем примере, как вы можете видеть в правом углу текст гласит « never compile ». Это означает, что наша папка LESS никогда не компилировалась:
Приложение также предлагает нам на выбор различные функции, а именно: Prefix , Minify , Love . Вы можете видеть их в правом углу окна под оповещением о статусе.
Пожалуйста, обратите внимание, что все эти функции могут включаться или выключаться индивидуально.
Давайте рассмотрим их использование:
Теперь давайте скомпилируем наш файл LESS в CSS. Для этого нужно просто нажать на иконку « Обновить » в левом углу окна приложения SimpLESS :
Пожалуйста, обратите внимание, что пока приложение запущено, оно будет отслеживать все обновления, которые вы совершаете для файлов в папке LESS:
Так что, когда вы откроете папку LESS, вы увидите, что в нее был добавлен файл CSS.
Убедитесь, что вы привязали скомпилированный файл CSS ( style.css ) к файлу index.html , чтобы добавились стили, которые вы задали через LESS:
Переменные LESS
Как и SASS, LESS также использует переменные. Если вы до этого занимались составлением кода, вы знаете, насколько использование переменных упрощает любой процесс.
В рамках предварительной обработки, наподобие той, что осуществляет LESS, переменные используются для заполнения значений каждого из стилей, применяемых в файле LESS.
Для определения переменной LESS использует знак @. Давайте посмотрим на практике, как это работает.
Откройте файл LESS и вставьте в него следующий код. Для этого кода я создал 3 переменные для цвета, размера шрифта и рамки.
Я добавил переменные myColor и myFontSize в тэг H1, переменную myBorder я добавил в список идентификаторов myList :
Теперь, если вы откроете файл style.css , вы увидите, что код был обновлен. Идем дальше, запускаем этот код через адресную строку браузера.
Вы увидите что-то похожее на то, что приведено на рисунке ниже:
Примеси LESS
Иногда нам нужно создать стили, которые могут повторяться по всей таблице стилей. В этом нам могут помочь примеси.
Так же, как и SASS, LESS поддерживает возможность добавлять каждый элемент неоднократно, но без необходимости использовать директиву @include . Вместо этого, ему достаточно всего лишь одной простой директивы класса стилей.
Чтобы понять, как в LESS работают примеси, давайте рассмотрим следующий код:
Как вы можете видеть, я создал примесь, которая называется sample-mixin , и добавил ее в тег H1 и параграф с ID myParagraph .
Если вы запустите документ в браузере, результат будет подобен тому, что показано на рисунке ниже:
Вложенные правила LESS
В LESS аналогично SASS применяются вложенные правила для идентификаторов и классов. Это позволяет поддерживать чистоту и организацию кода.
Чтобы показать их работу на практике, я создал пример CSS-кода и соответствующий ему вариант LESS.
Вариант CSS
Вариант LESS
Как видите, мы организовали наши стили с помощью LESS, и нам не пришлось повторять идентификатор container несколько раз.
Если вы запустите приведенные выше коды в браузере, то увидите аналогичные результаты.
Операторы LESS
Одной из самых полезных возможностей LESS является поддержка выполнения математических операций. Используя фиксированное значение стиля, вы можете добавлять, вычитать, умножать или даже делить его.
Давайте рассмотрим, как это работает:
Как вы видите, к базовому значению рамки в 5 пикселей я добавил еще 5 пикселей, а затем задал ее цвет. Базовый отступ в 90 пикселей я разделил на 3, и в результате получил отступ в 30 пикселей.
Если вы запустите этот код в браузере, то увидите следующий результат:
Функции LESS
LESS предоставляет большое количество функций для обработки элементов и стилей. В этой статье мы рассмотрим функции цвета, если вы хотите узнать больше обо всех функциях LESS, вы можете перейти по ссылке.
Ниже приводится список функций цвета LESS:
- darken (цвет, значение);
- lighten (цвет, значение);
- saturate (цвет, значение);
- desaturate (цвет, значение);
- alpha (цвет)
Давайте попробуем поработать с некоторыми из этих функций. Откройте файл style.less и скопируйте в него следующие коды:
Как видите, цвет фона был затемнен на 60%, а затем цвет текста тегов H1 и H2 стал светлее на 10%, а цвет текста тегов абзаца стал светлее на 20%.
Когда вы запустите данный код в браузере, то получите результат аналогичный, тому, что приведен на рисунке ниже:
Заключительное слово
Библиотека LESS предлагает для дизайнеров и разработчиков много фантастических возможностей. В этой статье представлено только общее описание системы.
Вы можете поэкспериментировать с представленными в статье кодами, после чего я хотел бы услышать о том, что у вас получилось, и увидеть результаты ваших экспериментов.
Всегда приветствуются пожелания, замечания и советы. Надеюсь, вам понравился этот урок, увидимся в следующий раз.
LESS — это динамический метаязык на основе каскадных таблиц стилей (англ. Cascading Style Sheets - CSS), предназначенный для упрощения, масштабирования и поддержки большого объёма CSS кода.
LESS был создан Alexis Sellier под влиянием более раннего метаязыка стилей SASS (Syntactically Awesome Stylesheets). Одной из особенностью LESS является то, что он может работать как на клиентской стороне, так и на стороне сервера. Язык стилей LESS это продукт с открытым исходным кодом, который строится на языке программирования JavaScript.
LESS, как, например, и язык стилей SASS - это CSS препроцессор, он позволяет расширить язык CSS, добавляя в него переменные, функции, миксины (примеси), которые позволяют повторно использовать код в таблицах стилей и прочие методы, которые сделают ваш CSS код более настраиваемым, расширяемым и масштабируемым. Возможно Вас удивит тот факт, что вы можете начать использовать LESS уже прямо сейчас, так как валидный CSS будет валидным и в LESS.
Подключение LESS
В этой статье мы с Вами рассмотрим два варианта работы с LESS, если быть точнее, то с файлами *.less . Первый вариант предусматривает использование файлов *.less напрямую в браузере пользователя с подключением необходимого скрипта JavaScript для компиляции на "лету".
Второй вариант предусматривает использование специального препроцессора, который будет компилировать файлы *.less в файлы каскадных таблиц стилей - *.css .
Начнем с первого варианта:
По аналогии с каскадными таблицами стилей вам необходимо подключить файл *.less к Вашему HTML документу с использованием тега <link>:
После этого вам необходимо скачать файл со скриптом, или, как вариант, получить ссылку на сеть доставки контента (CDN) на официальном сайте метаязыка LESS. Давайте остановимся на первом варианте и подключим скачанный файл:
Обратите внимание, что необходимо подключать файл со скриптом уже после того как вы подключили файл *.less . Этого достаточно, чтобы начать описывать стили с помощью метаязыка LESS, при этом как вы понимаете компиляция из LESS в CSS будет происходить на стороне браузера (на "лету").
Давайте перейдем к рассмотрению примера в котором начнем использовать 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.
Теперь программа Koala будет отслеживать все изменения в less файле и при их изменении сразу будет проводить их компиляцию в css . После первой компиляции вы увидите в главном окне файл css , кликнув под который, при необходимости вы сможете по аналогии настроить путь в который будут сохраняться файлы css , но уже минифицированные (стили без пробелов в одну строку). Как правило, такие стили используются на "боевых" (готовых) проектах. Рис.6 Настройка компиляции минифицированной версии CSS файла.
Не забудьте поставить галочку возле Auto Compile в случае необходимости компиляции минифицированной версии css файлов "на лету".
Комментарии в LESS
По аналогии с CSS допускается использовать внутри *.less файла как однострочные, так и многострочные комментарии со следующим синтаксисом:
Будьте готовы к тому, что в зависимости от настроек компилятора, комментарии могут не сохраняться при компиляции из файлов *.less в *.css . Например, вышерассмотренный компилятор Koala удаляет однострочные комментарии при компиляции, это поведение по умолчанию доступно изменить в его настройках.
Привет. Начну свое повествование с того, что заголовок написан не совсем корректно, однако так звучит удобнее, да и для новичка будет более логично звучать. Однако все немного не так. Давайте с базовых определений:
- Препроцессоры — это скрипт, программа и т.д. и т.п. принимающая и выдающая данные, предназначенные для другого ПО и т.д. (немного грязно, однако более детально можете почитать и интернете).
- Less — это динамический язык стилей, созданный под влиянием SASS
В итоге в результате компиляции мы на выходе получаем то, что вам нужно. Вы уже поняли, что с изложением мыслей у меня небольшие проблемы, однако если хотите углубиться в историю и определения, то тут это будет не так то и часто. Главное, что вам нужно знать: хотите писать стили быстрее и соответственно быстрее разрабатывать сайты, то Less будет первым шагом на этом непростом пути.
Полную версию записи вы
можете глянуть на моем сайте
Чтобы начать использовать нам потребуется то, что будет преобразовывать одно в другое. Это может быть комплексная программа, скрипты или инструменты сборки проектов. Могу порекомендовать то, чем сам пользовался в самом начале:
Я буду использовать как раз последний вариант ибо за 29$ программа дает очень многое: сборку, deploy, объединение всего и вся ну и самое главное live-reload (чтоб не перезагружать страницу).
Начало работы
С пустым трепом закончено. Начинаем вливаться в рабочий процесс. Создаем структуру проекта:
less
— Style.less
— Vars.less (необяхательно, для записи переменных)
— Mixin.less (необяхательно, для записи миксинов)
Index.html
Исходных файлов тут не будет, ибо итак будут все фрагменты в данной записи. Добавляем проект в блокнот и начинаем создавать магию.
Переменные
Тут все довольно просто, особенно если вы знаете или знакомы хоть с каким-нибудь языком программирования. Чтобы не прописывать постоянно одно и то же, а потом в случае необходимости менять индивидуально каждый кусок, то лучше создать обособленное значение и хранить данные внутри него.
Выглядит это примерно так:
Как вы видите, создавать переменные можно и за скобками и вообще вне времени и пространства, однако в рамках .less файла. После компиляции мы получаем вид:
К тому же переменные можно использовать в функциях, циклах и других операциях, о которых мы поговорим чуточку позже…
Я зачастую использую в переменных цвета, чтоб не запоминать их код или не выносить в отдельный класс.
Миксины (примеси)
Миксины — это простой способ примешивания\присоединения свойств из одного набора правил в другой. В моем случае, при написании кода я процентов 20 всего времени сокращаю, используя набор миксинов, который выложу целиком в другой заметке.
Можно разделить миксины на две группы: с параметрами и без них.
Без параметров: .mixin < стили >
С параметрами: .mixin(@param)
Рассмотрим пример:
.bordered(@size, @style: solid) <
border-top: @style @size black;
border-bottom: @style @size black;
>
В общем не пугайтесь записи, тут я решил не брать классический пример, а сразу сделал более-менее рабочий вариант миксина, который вы будете использовать большую часть времени.
В общем, первым параметром я задал переменную размера и указал внутри миксина в необходимом, точно так же сделал со стилем рамки, однако в переменной я задал значение по умолчанию, которое можно будет переопределить при выводе.
Делаем запись:
На выходе мы получаем следующее:
Выводить миксин можно двумя способами: .mixin(); или .mixin;
Однако почему-то на официальном сайте написано, что последний вариант хоть и работает, но просят не использовать.
Вложенность
Обычно в CSS вы пишите длинную запись вложенности стилей. Например так:
В Less нет необходимости повторно писать классы родительских элементов. Просто продолжайте писать внутри скобок, что значительно ускорит время разработки.
.navigation <
font-size: 12px;
>
В качестве сложенных значений можно использовать и @media
.box <
width: 300px;
@media (min-width: 768px) <
width: 600px;
>
@media (min-width: 1280px) <
width: 800px;
>
>
Логические операции
В 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 может быть немного неприятно писать, особенно когда речь идет о серьезных проектах с тысячами строк кода. В конечном итоге Вы вынуждены повсюду дублировать одни и те же стили и использовать поиск и замену Вашего редактора или IDE при каждом изменении цвета. Работа с большим файлом на чистом css – это кропотливый и, главное, совсем не творческий процесс, в котором слишком легко упустить важную деталь и ошибиться. Но все это до тех пор, пока Вы не начинаете использовать препроцессор.
К счастью, сообщество веб-разработчиков решило проблему громоздких css-файлов с уймой повторяющихся блоков стилей. Теперь у нас есть CSS-препроцессоры, такие как Less, Sass и Scss. Они дают нам ряд преимуществ по сравнению с простым CSS:
- Переменные, чтобы Вы могли определять и легко изменять значения во всем файле стилей. (Это когда-нибудь появится и в CSS);
- Динамически рассчитанные значения. (В CSS мы имеем calc, но это только для единиц длины);
- Миксины, которые позволяют Вам повторно использовать и комбинировать стили. Они даже поддерживают передачу аргументов.
Негативный аспект заключается лишь в том, что, если Вы используете один из этих препроцессоров, Вам нужно будет скомпилировать таблицы стилей до обычного CSS, чтобы он работал в браузерах.
Инструментарий для работы с препроцессором less
Препроцессор Less написан на JavaScript, и для его работы требуется либо Node.js, либо веб-браузер. Конечно, Вы можете подключить less.js на своем веб-сайте, и он будет прямо там компилировать все файлы стилей .less в режиме реального времени, но этот процесс слишком сильно тормозит загрузку Вашей страницы и категорически не рекомендуется.
Рекомендуемый способ - заранее скомпилировать Ваши написанные на less стили в обычные стили css и в таком виде подключать их к Вашей веб-странице. Существует ряд бесплатных графических утилит, которые могут скомпилировать файлы .less: можно воспользоваться сборщиками проектов, такими как webpack или gulp, многие IDE также отлично справляются с компиляцией less-файлов, но давайте рассмотрим в этой статье способ с использованием node.js, который не требует ни мощной IDE, ни установки лишних программ.
Если у Вас установлена node (а она у Вас установлена, раз Вы занимаетесь веб-разработкой) и Вы знаете, что такое терминал, откройте его и установите через него Less, используя следующую команду NPM:
npm install –g less
Это даст Вам доступ к команде less из любого открытого терминала, что позволит Вам скомпилировать Ваши файлы .less в обычный CSS в абсолютно любой директории на устройстве. Вот единственная необходимая команда для компиляции less-файла в css-файл:
lessc styles.less styles.css
После того как Вы скомпилировали css-файл, подключите его к html-файлу. Если в процессе компиляции произошла ошибка, она отобразится в Вашем терминале.
Работа с переменными в препроцессоре less
Одной из основных особенностей Less является возможность создавать переменные также, как и в стандартном языке программирования. Они могут хранить любые типы значений, которые Вы часто используете: цвета, размеры, селекторы, имена шрифтов, URL-адреса и так далее. Философия less заключается в повторном использовании синтаксиса CSS, где это возможно.
Здесь мы определяем и используем две переменные: одну для цвета фона и одну для цвета текста, обе из которых содержат шестнадцатеричные коды.
В приведенном выше примере цвет фона серый, а текст красный. Если, скажем, мы хотим переключить их и получить красные элементы с серым текстом, мы можем просто изменить значения переменных, вместо того, чтобы вручную заменять каждое использование этих цветов в таблицах стилей.
Работа с миксинами в препроцессоре less
Less позволяет нам использовать существующий класс или идентификаторы и применять все его стили непосредственно к другому селектору. Следующий пример прояснит ситуацию:
Если Вы не хотите, чтобы миксин появлялся в скомпилированном CSS, Вы можете поместить скобки после него:
Еще одна крутая вещь, которую могут делать Mixins - это получать параметры. В следующем примере мы добавляем аргумент для ширины и высоты наших кругов со значением по умолчанию 20 пикселей. Это создаст маленький круг 20x20 и большой 200x200 пикселей.
Работа с вложенностью в препроцессоре less
Вложенность может использоваться для структурирования таблицы стилей таким образом, чтобы она соответствовала структуре HTML страницы, одновременно уменьшая вероятность конфликтов. Вот пример неупорядоченного списка и его дочерних элементов:
Как и в языках программирования, переменные Less получают свои значения в зависимости от области видимости. Если значение не указано в конкретной области, LESS будет искать его в верхних блоках, пока не найдет ближайшее объявление.
В следующем примере после компиляции в CSS наш li будет иметь текст белого цвета, так как в правилах ul мы предварительно определили strong > @ text-color.
Работа с функциями в препроцессоре less
В Less также есть функции! Он начинает все больше и больше походить на язык программирования, а не «таблицу разметки стилей», не так ли?
Давайте посмотрим на функцию fadeout, которая увеличивает прозрачность цвета.
Приведенный выше код добавляет эффект прозрачности нашему div при наведении курсора на него. Существует множество других полезных функций, уже встроенных в Less, стоит только поискать.
Читайте также: