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

Less CSS препроцессор для начинающих

Привет. Начну свое повествование с того, что заголовок написан не совсем корректно, однако так звучит удобнее, да и для новичка будет более логично звучать. Однако все немного не так. Давайте с базовых определений:

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

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

Чтобы начать использовать нам потребуется то, что будет преобразовывать одно в другое. Это может быть комплексная программа, скрипты или инструменты сборки проектов. Могу порекомендовать то, чем сам пользовался в самом начале:

LESS за 50 минут | Учим препроцессор LESS

• Koala app — koala-app.com
• Расширение для вашего редактора (точно есть в редакторах Brackets, Atom, VS Code )
• Prepros — prepros.io (увы, в России сайт почему-то заблокирован, однако VPN в помощь. ПЛАТНО)

Я буду использовать как раз последний вариант ибо за 29$ программа дает очень многое: сборку, deploy, объединение всего и вся ну и самое главное live-reload (чтоб не перезагружать страницу).

Начало работы с less css

С пустым трепом закончено. Начинаем вливаться в рабочий процесс. Создаем структуру проекта:

less — Style.less — Vars.less (необяхательно, для записи переменных) — Mixin.less (необяхательно, для записи миксинов) index.html

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

Переменные

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

Выглядит это примерно так:

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

#header

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

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

Препроцессор LESS: как использовать и зачем нужен?

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

Миксины (примеси)

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

Можно разделить миксины на две группы: с параметрами и без них.

Рассмотрим пример:

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

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

Делаем запись:

#menu a < color: #111; .bordered(1px); // .bordered(1px, dashed); если нужно переопределить переменную по умолчанию >

На выходе мы получаем следующее:

#menu a

Выводить миксин можно двумя способами: .mixin(); или .mixin;

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

Вложенность

Обычно в CSS вы пишите длинную запись вложенности стилей. Например так:

#header < color: black; >#header .navigation < font-size: 12px; >#header .logo

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

#header < color: black; .navigation < font-size: 12px; >.logo < width: 300px; >>

Логические операции

В Less вы так же можете выполнять арифметические операции используя символы: +, -, *, / разделяя аго пробелом с двух сторон от значений. При всем при этом операции можете проводить не только над числовыми значениями, но и над цветами

Самые важные операции и отличительные особенности мы с Вами рассмотрели, остальное Вы можете более детально изучить на официальном сайте lesscss.org, ибо там все действительно хорошо и подробно расписано.

А мы переходим к последнему и очень важному в Less

Импорт файлов

Вообще для параметров импорта предусмотрена следующая запись:

О ключевых словах (keyword) можете прочитать более детально опять же на официальном сайте: lesscss.org/features/#import-atrules-feature

Однако по своей практике скажу, что кроме inline и reference (использование less файл, но без его вывода) я ничего не использовал. Поэтому и не стал описывать…

Рабочий пример по изученному материалу

Для того, чтобы было удобнее работать с media, можно создать удобный миксин с переменными

В переменной сайт в каждой строчке прописываем необходимые значения. Далее при выводе мы вызываем переменную, как и обычно, однако в квадратных скобках пишем необходимое нам значение из этой переменной. И ура, все будет работать, как надо:

Ин конклюжен

Я уже более 6 лет работаю с данным метаязыком и остаюсь доволен. Пробовал SASS (.scss), однако не понравился синтаксис его ибо less более короткий в записи. Есть конечно же SASS (.sass) который меня более чем устраивал и устраивает сейчас, однако есть много НО, о которых я расскажу чуть позже.

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

Источник: notbadone.ru

Изучаем препроцессор LESS за 10 минут

К счастью, сообщество веб-разработчиков решила эту проблему. Теперь у нас есть такие CSS препроцессоры, как Less, Sass и Stylus. Они дают нам ряд преимуществ по сравнению с обычной CSS:

• Переменные, благодаря которым вы сможете определить и легко изменять значения CSS свойств)
• Динамически вычисляемые значения (в CSS мы недавно получили свойство calc).
• Примеси, которые позволяют повторно использовать и комбинировать стили. Они даже поддерживают passing аргументы.
• Функции, которые дают вам ряд полезных утилит для работы с цветом, конвертирования изображений в data-uri и д.р.

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

1. Установка LESS

Препроцессор Less написан на JavaScript и для работы с ним вам потребуется либо Node.js, либо веб-браузер для запуска. Вы можете подключить less.js на вашем веб-сайте, или скомпилировать все связанные .less стили в режиме реального времени, но это медленно и не рекомендуется. Рекомендуемый способ заключается в компиляции ваших .less стилей в обычный файл CSS для продакшена. Есть ряд бесплатных графических программ, которые могут компилировать .less файлы для вас, но в этой статье мы будем пользоваться Node.js.

Если вы уже установили Node.js, то откройте терминал и установите Less с помощью npm:

npm install -g less

Это даст вам доступ к команде lessc из любого открытого терминала, что позволит везде компилировать ваши .less файлы в CSS:

lessc styles.less > styles.css

В результате (если не было ошибок при компиляции) ваш код будет преобразован в обычный CSS, находящийся в файле styles.css. Все, что осталось, — это подключить полученный CSS файл к HTML странице.

2. Переменные

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

Здесь мы определяем две переменные, содержащие шестнадцатеричные коды: одну для цвета фона и одну для цвета текста. Попереключайтесь между вкладками, чтобы увидеть как Less трансформируется в CSS:

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

3. Примеси

LESS позволяет использовать существующий класс, или идентификаторы и применять все их стили непосредственно к другому селектору. Следующий пример внесет ясность:

4. Вложенности и Области видимости

Вложенности можно использовать для структурирования таблицы стилей способом, который совпадает с HTML-структурой страницы, снижая вероятность ошибок и конфликтов Вот пример для неупорядоченного списка и его детей:

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

Узнать об этом больше можно в Области видимости.

5. Операции

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

6. Функции

LESS также имеет свои функции! Давайте взглянем на функцию fadeout, которая уменьшается непрозрачность цвета:

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

На этом наша 10-минутка закончилась и вы уже неплохо разбираетель в препроцессоре LESS).

Источник: websketches.ru

Изучаем LESS: Общее описание системы

Теперь, когда мы закончили рассмотрение SASS, давайте поговорим о LESS. Если вы еще не читали мою статью по SASS, вы можете найти ее здесь.

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

Мы также говорили о том, как реализовать SASS с помощью переменных, вложенных элементов, примесей, функций и так далее.

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

LESS в двух словах

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

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

LESS работает и на стороне клиента ( IE , Firefox и т.д.), и на стороне сервера, используя Node.js . В этой статье мы рассмотрим клиентскую сторону. Так что, просто сядьте как можно удобнее, расслабьтесь и наслаждайтесь уроком.

Что вам понадобится для выполнения заданий данного урока:

• LESS библиотека ;
• SimpLESS для Mac/Windows (компилятор на стороне клиента);
• Текстовый редактор;
• Время и терпение.

Установка SimpleLESS

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

При первом запуске 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 . Вы можете видеть их в правом углу окна под оповещением о статусе.

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

Давайте рассмотрим их использование:

• Prefix — позволяет обеспечить совместимость с различными браузерами с помощью префиксов;
• Minify — сжимает ваш CSS документ, с помощью встроенного CSS-минификатора;
• Love — функция комментирует или извещает о состоянии SimpLESS для вашего документа.

Теперь давайте скомпилируем наш файл LESS в CSS. Для этого нужно просто нажать на иконку « Обновить » в левом углу окна приложения SimpLESS :

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

Пожалуйста, обратите внимание, что пока приложение запущено, оно будет отслеживать все обновления, которые вы совершаете для файлов в папке LESS:

Так что, когда вы откроете папку LESS, вы увидите, что в нее был добавлен файл CSS.

Убедитесь, что вы привязали скомпилированный файл CSS ( style.css ) к файлу index.html , чтобы добавились стили, которые вы задали через LESS:

Переменные LESS

Как и SASS, LESS также использует переменные. Если вы до этого занимались составлением кода, вы знаете, насколько использование переменных упрощает любой процесс.

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

Откройте файл LESS и вставьте в него следующий код. Для этого кода я создал 3 переменные для цвета, размера шрифта и рамки.

Я добавил переменные myColor и myFontSize в тэг H1, переменную myBorder я добавил в список идентификаторов myList :

Теперь, если вы откроете файл style.css , вы увидите, что код был обновлен. Идем дальше, запускаем этот код через адресную строку браузера.

Вы увидите что-то похожее на то, что приведено на рисунке ниже:

Примеси LESS

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

Чтобы понять, как в LESS работают примеси, давайте рассмотрим следующий код:

. sample-mixin < border: 1px solid red; color: # ff871f; margin: 30px; >h1 < font-family: Arial; .sample-mixin; >#myParagraph

Как вы можете видеть, я создал примесь, которая называется sample-mixin , и добавил ее в тег H1 и параграф с ID myParagraph .

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

Вложенные правила LESS

В LESS аналогично SASS применяются вложенные правила для идентификаторов и классов. Это позволяет поддерживать чистоту и организацию кода.

Чтобы показать их работу на практике, я создал пример CSS-кода и соответствующий ему вариант LESS.

Вариант CSS

#container < margin: 0px auto; width: 600px; border: 1px solid black; >#container header < color: red; >#container #myList < color: green; padding: 30px; >#container footer

Вариант 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 предлагает для дизайнеров и разработчиков много фантастических возможностей. В этой статье представлено только общее описание системы.

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

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

Источник: www.internet-technologies.ru

SASS или LESS что лучше начать учить

В этой статье я бы хотел разобрать, что лучше начать учить в 2020 году, SASS или LESS, надеюсь статья для вас будет полезна, и вы найдёте здесь ответ на свой вопрос.

Что такое SASS и LESS:

Для начала хочу рассказать что такое SASS и LESS, для тех кто не знает.

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

Сравнение SASS и LESS:

Теперь перейдём к самому сравнению этих двух технологий.

Подробнее о каждом:

SASS (Syntactically Awesome Stylesheets) — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Был создан в 2006 году, не большой командой разработчиков, но главный автор этого языка Хамптон Катлин (англ. Hampton Catlin).

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

LESS (Leaner Style Sheets, компактная таблица стилей)— это динамический язык стилей. Он создан под влиянием языка стилей SASS, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS .

Этот язык был создан в 2009 году, силами человека по имени Алексис Селье (англ. Alexis Sellier).

Также надо сказать, что сейчас его разработка прикрашена, ещё в 2016 году, но зато он перерос практически в отдельную JavaScript библиотеку, что усложнит его использование не подготовленному человеку, то есть не знающего JS.

Синтаксис:

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

Для LESS всё стандартно, покажу как использовать именно в обычно LESS, без JavaScript.

Попытаемся сделать эту картинку.

Сначала посмотрите как сделать это на SASS со синтаксисом SCSS.

Источник: prognote.ru

Введение в 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 документу с использованием тега :

rel = «stylesheet/less» href = «styles.less»> // подключаем less файл к документу

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

rel = «stylesheet/less» href = «styles.less»> // подключаем less файл к документу src = «less.js»> // подключаем скрипт JavaScript для преобразования метаязыка LESS в CSS

Обратите внимание, что необходимо подключать файл со скриптом уже после того как вы подключили файл *.less . Этого достаточно, чтобы начать описывать стили с помощью метаязыка LESS, при этом как вы понимаете компиляция из LESS в CSS будет происходить на стороне браузера (на «лету»).

Давайте перейдем к рассмотрению примера в котором начнем использовать LESS:

В этом примере мы создали отдельный файл 2.less в котором указали следующие стили:

h1 color: rgb(29,55,93); // устанавливаем цвет текста > p background: rgb(29,55,93); // устанавливаем цвет заднего фона color: #fff; // устанавливаем цвет текста белый >

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

Результат преобразования будет следующий:

h1 color: #1d375d; // значение в HEX > p background: #1d375d; // значение в HEX color: #fff; >

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

Результат нашего примера * :

* — Если вы решили повторить этот пример локально на своем компьютере и не увидели результат примера, показанный на изображении выше, то скорее всего вы сможете найти в консоли браузера подобную ошибку: «Failed to load file:///***/2.less: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https . Мы с Вами не будем вникать в локальные политики разных браузеров, отключать их и запускать браузеры с определенными ключами, просто попробуйте воспользоваться браузером Firefox для этого примера, или переходите к дальнейшему чтению.

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

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

Препроцессор Koala

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

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

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

После этого необходимо создать файл *.less и подключить в программе Koala папку в которой находится этот файл (нажмите на +), например, в моем случае папка less:

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

Я выбрал ту же папку в которой находится less файл, в результате у вас должно получиться следующее:

Теперь программа Koala будет отслеживать все изменения в less файле и при их изменении сразу будет проводить их компиляцию в css . После первой компиляции вы увидите в главном окне файл css , кликнув под который, при необходимости вы сможете по аналогии настроить путь в который будут сохраняться файлы css , но уже минифицированные (стили без пробелов в одну строку). Как правило, такие стили используются на «боевых» (готовых) проектах.

Не забудьте поставить галочку возле Auto Compile в случае необходимости компиляции минифицированной версии css файлов «на лету».

Комментарии в LESS

По аналогии с CSS допускается использовать внутри *.less файла как однострочные, так и многострочные комментарии со следующим синтаксисом:

// это однострочный комментарий /* это многострочный комментарий */ /* это многострочный комментарий в одной строке */

Будьте готовы к тому, что в зависимости от настроек компилятора, комментарии могут не сохраняться при компиляции из файлов *.less в *.css . Например, вышерассмотренный компилятор Koala удаляет однострочные комментарии при компиляции, это поведение по умолчанию доступно изменить в его настройках.

Приступая к изучению
Правила вложенности

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Источник: basicweb.ru