Компиляция Less в CSS


Содержание

Работаем с less в Sublime Text. Компилируем less исходники Bootstrap

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

Самый простой способ начать компилировать less код в css в Sublime Text — это установить плагин Less Build. Главное чтобы в пути к компилируемому файлу не было русских символов, и работать он будет хорошо. Для новичков этого вполне хватит. Еще можно установить плагин BuildOnSave, чтобы билдить не сокращением Ctrl+B, а нажимать привычное Ctrl+S, и билд будет происходить по сохранению файла.

Но вот я решил скомпилировать less исходники Twitter Bootstrap, и не тут то было. Консоль Build Results начала выдавать множество ошибок, в самых разных файлах. Все дело в том что в less были обновлены правила синтаксиса, причем достаточно давно, но эти новшества в плагинах для Sublime Text видимо не были внедрены. Поэтому необходимо изменить способ сборки less файлов. Прошу не пугаться, займет это не более 5 минут.

Компилируем less исходники bootstrap в Sublime Text

1. Добавляем подсветку синтаксиса less в SublimeText

Открываем SublimeText, запускаем package control — install package. Как установить менеджер расширений package control читаем здесь. Устанавливаем плагин less — Syntax highlighting. Теперь у нас есть подсветка less кода.

2. Устанавливаем less компилятор

Сначала необходимо скачать и установить Node.js и NPM (Node Package Manager — входит в состав node.js). После этого запускаем консоль, если у вас нет консоли — скачиваем консоль ConEmu для Windows, устанавливаем и запускаем консоль. В консоли вводим команду для установки компилятора less:

3. Устан авливаем Less build плагин в Sublime Text

Запускаем Package Conrol → Install Package и устанавливаем плагин Less2Css

4. Компилируем less

Создаем две папки в проекте less и css. В less — кладем less исходники Bootstrap, открываем файл bootstrap.less и компилируем.Css — оставляем пустой, в нее будет сохранен скомпилированны css из less исходника.

Если возникла ошибка: Unable to interpret argument clean-css … заходим в консоль и пишем:

Компилятор LESS/SASS/SCSS в css файлы

Технические данные

Описание

С чем может быть связана очень долгая работа компилятора? До этого использовал версию 1.0.3, работало отлично, на другом проекте установил последнюю версию и стало очень долго компилить при изменении файла. Попробовал залить на новый проект компонент с прошлого проекта, это не помогло, так же долго компилит, а потом еще выдает сверху страницы Line 195 WARN: на такую констуркцию в файле миксинов, но после обновления страницы этот варнинг исчезает.

@else if $ > @media only screen and (max-width: 400px) < @content; >
>
@else <
@warn «Breakpoint mixin supports: w1300, w1200, w1000, w800, w650, w550, w450, w400»;
>

Максим Зверев, не знаком с compass.

Судя по хабру: «Compass нечто большее чем CSS препроцессор, разработчики Compass позиционируют его как дизайнерский фреймворк. Compass использует SASS синтаксис (.sass или .scss), так что любой SASS код будет скомпилирован и в Compass.». Если ваш компилятор поддерживает его, то будет работать. Из коробочных: скорее всего нет поддержки (не проверял).

Изучаем 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 ниже таблицы стилей:

Heading 1

Heading 2

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Затем создайте новый файл и назовите его style.less . Чтобы вы могли увидеть, как компилируется LESS, давайте добавим в этот файл несколько примеров кодов LESS. Идем дальше.

Скопируйте и вставьте следующий код в файл style.less :

На данный момент у вас должна получиться структура файла наподобие этой:

Компиляция LESS помощью SimpLESS

Для компиляции LESS файла в CSS, запустите приложение SimpLESS и перетащите папку « LESS », которую мы создали раньше, в окно приложения:

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

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

В моем примере, как вы можете видеть в правом углу текст гласит « never compile ». Это означает, что наша папка LESS никогда не компилировалась:

Приложение также предлагает нам на выбор различные функции, а именно: Prefix , Minify , Love . Вы можете видеть их в правом углу окна под оповещением о статусе.

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

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

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

Теперь давайте скомпилируем наш файл 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 и параграф с >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, как скачать и использовать, примеры и др.

Начинаем работатать с Less

Less является препроцессором CSS. Он расширяет язык CSS, добавляя такие возможности, как переменные, миксины, функции и многие другие техники, которые сделают Ваш CSS более поддерживаемым, «темизируемым» (да-да, речь про поддержку стилистически единых тем оформления) и расширяемым.


Less можно запустить внутри Node, в браузере и в Rhino. Существует множество сторонних инструментов, которые позволяют компилировать Less файлы и отслеживать изменения. Наиболее легкий способ попробовать Less — использовать наш онлайн редактор.

Например, запись на Less:

превратится после компиляции в

Использование Less

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

Установка

Самый простой спосок установить Less на сервере – использовать npm, менеджер пакетов node.js, примерно так:

Использование из командной строки (cli)

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

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

Для вывода минифицированный CSS, можно использовать плагин clean-css . Когда плагин установлен, минификация вывода CSS задается опцией —clean-css :

To see all the command line options run lessc without parameters or see Usage.

Usage in Code

You can invoke the compiler from node, as such:

which will output

Configuration

You may pass some options to the compiler:

See Usage for more information.

Third Party Tools

See the Usage section for details of other tools.

Each Less release contains also rhino-compatible version. Command line rhino version requires two files: * less-rhino- .js — compiler implementation, * lessc-rhino- .js — command line support. Command to run the compiler: «« java -jar js.jar -f less-rhino- .js lessc-rhino- .js styles.less styles.css «« This will compile styles.less file and save the result to styles.css file. The output file parameter is optional. If it is missing, less will output the result to `stdout`.

Client-s >

Using less.js in the browser is great for development, but it’s not recommended for production

Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.

To start off, link your .less stylesheets with the rel attribute set to » stylesheet/less «:

Next, download less.js and include it in a tag in the element of your page:

  • Make sure you include your stylesheets before the script.
  • When you link more than one .less stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.
  • Due to the same origin policy of browsers loading external resources requires enabling CORS

Browser Options

Options are defined by setting them on a global less object before the :

Or for brevity they can be set as attributes on the script and link tags (requires JSON.parse browser support or polyfill).

Где взять Less

Загрузка через браузер

Загрузка исходного кода


Загрузите свежую версию исходников Less напрямую с GitHub.

Клонировать или форкнуть на GitHub

Форкните проект и отправьте нам pull request!

Установка через Bower

Установите скрипт less.js, запустив следующую команду:

Подключение Less через CDN

Вопросы по лицензии

Less is released under the Apache 2 License (though there are plans to dual license it). Copyright 2009-2020, Alexis Sellier and the Less Core Team (see about). Boiled down to smaller chunks, it can be described with the following conditions.

It allows you to:

  • Freely download and use Less, in whole or in part, for personal, company internal or commercial purposes
  • Use Less in packages or distributions that you create

It forbids you to:

  • Redistribute any piece of Less without proper attribution
Илон Маск рекомендует:  Тег frameset

It requires you to:

  • Include a copy of the license in any redistribution you may make that includes Less
  • Provide clear attribution to The Less Core Team for any distributions that include Less

It does not require you to:

  • Include the source of Less itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Submit changes that you make back to the Less project (though such feedback is encouraged)

The full Less license is located in the project repository for more information.

Less and these docs are maintained by the core Less team.

Documentation source code released under the MIT License, documentation under CC BY 3.0.

Компилировать файлы LESS в CSS

Как мне препроцессор или скомпилировать во время выполнения файлы LESS в последней версии Drupal 8?

Я использую стартовую тему LESS Bootstrap. Less CSS Preprocessor в настоящее время не портирован на Drupal 8.

В следующих двух руководствах говорится, что мне нужен NodeJS и меньший пакет для его компиляции, но это не во время выполнения Drupal:

2 ответа

Если вы не хотите ждать, пока порт модуля Less CSS Preprocessor запустит компилятор less во время выполнения, вы можете запустить инструмент командной строки из settings.php


Это только для разработки, удалите это из производственных settings.php.

lessc ссылается на этот пакет npm:

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

Для глобальной установки с помощью npm:

lessc — это команда, доступная в вашей командной строке, и тогда ваша команда компиляции будет работать.

Программа Koala — легкая компиляция Sass, Less и CoffeeScript

Программа Koala — легкая компиляция Sass, Less и CoffeeScript

Здравствуйте! Сегодня я начинаю цикл статей о препроцессорах CSS. И начать я хотел бы с обзора программы Koala, которая помагает компилировать код с LESS или SASS на CSS.

Koala — это кроссплатформенная программа для компиляции Less, Sass, Compass и CoffeeScript. Работает на Win, Mac OS и Linux.

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

Преимущества

  • Поддержка нескольких языков: Koala работает с Less, Sass (*.scss), CoffeeScript и фреймворком Compass. Кроме того, она может компилировать и обыкновенные CSS и JS, не связанные с препроцессорами.
  • Компиляция в реальном времени: Koala отслеживает изменения файлов и автоматически компилирует их. Все действия происходят в фоновом режиме и не требуют вмешательства разработчика.
  • Настройка компиляции: Можно указывать разные компиляторы для каждого выбранного файла. Впрочем, это вам вряд ли понадобится.
  • Компрессия: Koala умеет автоматически сжимать код после компиляции. Эту функцию по желанию можно не использовать.
  • Сообщения об ошибках: Если программа встретила ошибку в коде при компиляции, она покажет уведомление. Если ошибок нет, просто будет пересоздан результирующий файл.
  • Кроссплатформенность: Koala работает на Windows, Mac и Linux.

Интерфейс

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

Основные элементы управления всегда на виду. Вот для чего они нужны:

При переключении типов файлов из общего списка останутся только файлы выбранного типа.

Настройки SASS и LESS

В настройках есть приятные вещи. Возьмем вкладку с настройками Sass:

В два клика Koala начнет сохранять ваши Sass-файлы в CSS, никаких дополнительных плагинов устанавливать для Sass не потребуется.

Koala умеет автоматически добавлять кроссбраузерные префиксы для css-свойств, сохранять комментарии. В типе файла CSS я всегда рекомендую выбирать compressed, так его вес будет минимальным, а для удобства разработки оставлять включенными Source maps.

Автопрефиксы — это автоматическое добавление префиксов для поддержки свойств CSS3 в браузерах устаревших версий.

Например, для скругления углов в 3 пикселя вам будет достаточно написать:

…а после работы автопрефикса получите:

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

Настройки JavaScript и CoffeeScript

Для JS есть всего две настройки:

  1. Compress — всегда включайте, чтобы полученный js-файл сжимался.
  2. Preserve copyright comments

Для CoffeeScript в 99% случаев вы оставите настройки по умолчанию, поэтому останавливаться на них нет смысла.

Где скачать


Скачивайте программу с официального сайта разработчиков — koala-app.com. Там есть отдельные ссылки для Linux, Mac, Ubuntu.

В итоге

В итоге я могу назвать Koala самым простым и правильным решением для разработчика, кому не нужны сложные настройки и функции. Если вам для работы нужен графический интерфейс, компиляция только Sass/Less/CSS и нежелание копаться в командной строке, тогда Koala — ваш выбор.

Koala хорошо подходит для начинающих разработчиков или тех, кто делает небольшой проект и не хочет разворачивать полную версию Gulp или Grunt.js.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Использование CSS-препроцессора LESS на сервере Ubuntu

Что такое LESS?

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

LESS можно использовать на стороне сервера и на стороне клиента. Для компиляции CSS на серверной стороне понадобится Node.js; на клиентской стороне для этого нужно загрузить файл javascript и добавить его на страницу.

Примечание: на самом деле, загружать javascript на сайты на стадии производства не рекомендуется; но если это все-таки необходимо, используйте специально разработанный «режим наблюдения» (watch mode).

Данное руководство продемонстрирует установку и запуск LESS на серверной стороне. Для этого понадобится предварительно настроенный сервер Ubuntu и веб-сервер (чтобы иметь доступ к браузеру). Кроме того, нужно установить Node.js и NPM (Node Package Manager); чтобы получить инструкции по установке этих программ, читайте эту статью.

Установка LESS

Итак, установив Node.js и NPM, запустите следующую команду, чтобы установить LESS:

npm install -g less

После установки LESS на виртуальный выделенный сервер используйте командную строку, чтобы скомпилировать файлы .less в .css. Чтобы попробовать сделать это, перейдите в document root веб-сервера (по умолчанию в Apache это каталог /var/www) и создайте файл .less:

В этот файл внесите следующее объявление CSS (обратите внимание, что язык LESS – это немного дополненный язык CSS):

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

В окне терминала появятся выходные данные. Чтобы внести их в файл .css (что, как правило, необходимо), задайте целевой файл:

lessc /var/www/test.less > /var/www/test.css

Теперь на сервере есть новый файл .css, содержащий скомпилированные операторы css из файла .less.

Чтобы LESS уменьшил вывод css, внесите в команду опцию –х:

lessc /var/www/test.less > /var/www/test.css -x

Это создаст готовый к производству уменьшенный файл css. Чтобы узнать больше о командах LESS, посетите этот сайт или запустите команду lessc без параметров.

Язык LESS

Так чем же LESS лучшее обычного CSS? Вот несколько преимуществ данного препроцессора.

Переменные

LESS позволяет использовать в css переменные; например:

@white: #fff;
#white-box <
color: @white;
>

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

Примешивания (миксины; mixins)

Миксины позволяют повторно использовать существующие объявления стиля и «смешивать» свойства из нескольких наборов правил.

Например, такой код:

shape <
size: 100%;
padding: 20px;
>
.box <
.shape;
background-color: red;
>

.box <
size: 100%;
padding: 20px;
background-color: red;
>

Как видите, первое объявление является миксином, который позже будет внесен (примешан) в другое объявление (элемент .box).

Вложения (Nesting)

Еще одна полезная функция LESS – возможность вкладывать определения. Например:


.box <
color: red;
>
.box .box-inner <
max-width: 80%
>

Это позволяет сократить и более логично организовать код.

Операции

Также LESS позволяет выполнять операции над числами и значениями переменных. Например:

@length: 10px + 20;
.box <
width: @length / 2;
>

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

Функции

LESS поставляется с предопределенными функциями, которые можно использовать для управления элементами HTML в таблицах стилей. Например:

Илон Маск рекомендует:  Iis управление доступом к базам данных

.box <
color: saturate(#398bce, 5%);
>

Функция saturate() будет установит свойство насыщенности цвета элемента .box на 5%.

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

Импортирование

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

Он объединит все объявления, сделанные в файле base.less. Таким образом доступные переменные и миксины можно размещать где угодно. Единственное, что нужно отметить: если не указать расширение файла, LESS автоматически интерпретирует импортированный файл как файл с расширением .less. Чтобы импортировать простой файл .css, нужно просто указать расширение. Если же задать любое другое расширение, оно также будет интерпретировано как .less.

Итоги

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

Кроме того, существуют приложения с графическим интерфейсом, позволяющие использовать LESS на компьютере. Они также включают в себя компилирование файлов .less в css. Можно использовать кросс-платформенные компиляторы (как Crunch или Mixture), которые работают как на Windows, так и Mac, а также подобрать компилятор для конкретной платформы. Такие приложения можно найти здесь.

Также можно попробовать поработать с Sass, еще одним популярным процессором CSS. На нашем сайте есть руководство по работе с ним.

Изучаем LESS: Применение на практике

Дата публикации: 2020-01-19

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Написание кода LESS

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

LESS.APP

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

CODEKIT

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

CodeKit – это новое поколение приложения LESS.app, которое стоит $20 (чтобы помочь создателю выплатить кредит на обучение, так что, на самом деле, не так уж и плохо). CodeKit компилирует LESS идеально, но это еще не все. Он также компилирует файлы Sass, Stylus, Haml, Coffeescript, JavaScript и Compass. Пусть я и немного знаю об этих других типах файлов (не считая JavaScript), но… CodeKit может скомпилировать их все! Мало того, у CodeKit есть еще одно преимущество – когда пользователь сохраняет код, его браузер автоматически обновляется и отображает изменения, и все это сопровождается прикольной CSS3 анимацией.

Проекты LESS

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

BOOTSTRAP от TWITTER

Bootstrap от Twitter – это на данный момент один из самых популярных проектов с открытым кодом, он разработан Mарком Oттo и Джейкобом из Twitter. Bootstrap – это набор HTML, CSS и JavaScript компонентов для пользовательского интерфейса и взаимодействий, включая адаптивный дизайн и такие компоненты как кнопки, формы и другое.

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

Адаптивная тема WORDPRESS BONES

Если вы хотите заниматься веб-дизайном и разработкой для WordPress, я бы предложил начать с темы Bones. Существует много шаблонов WordPress для начинающих, но я думаю, вряд ли найдется что-то лучше, чем Bones от Эдди Мачадо.

Адаптивная версия Bones использует LESS, чтобы структурировать сайт WordPress посредством медиа-запросов CSS3 и определить, какой файл LESS нужно загружать в компилятор. Система довольно удобная, и если вы собираетесь работать с WordPress, то она определенно достойна внимания.

Проект 320 AND UP

320 and Up – это адаптивный шаблон в стиле «малые экраны – прежде всего». Этот проект является идеальной отправной точкой для тех, кто хочет создавать адаптивные веб-сайты, не интегрируя их с CMS. Если вы собираетесь импортировать веб-сайт на другую CMS, например, в ExpressionEngine, 320 and Up – это как раз для вас. Этот проект использует LESS для того, чтобы создать адаптивный фреймворк для стилизации начиная с малых экранов и заканчивая большими — в отличие от концепции «веб-дизайн для стационарного компьютера в первую очередь, а для экранов меньше в следующую очередь». Проект очень интересный и определенно заслуживает внимания!

Заключение

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

Автор: Alex Ball

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с нуля

LESS CSS — Пытаемся разобраться.

«Это как стеройды для веб разаработки»

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

Сравнение Less и классического CSS

В основном существуют три больших игрока это конечно же LESS, Sass и Stylus. Они все в своем роде прикрасны, но мы сегодня рассмотрим LESS так как на сегодгяшний момент н является самым популярным в среде профессиональной разработки. Написан он в далекам 2009 году программистом Алексисом Сельером, написан он на чистом JavaScript, но изначально Алексис написал его на Ruby, через некоторое время разработчик понял что пора переписывать код и сделал правельный выбор.

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

Компилятор

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

Используйте.LESS вместо компиляции в.css

Просто интересно, каковы преимущества компиляции.less в.css с компиляторами, такими как Crunch или Prepros, а не напрямую с файлом.less? Не стоит ли полагаться на less.js-библиотеку, а.css может быть автономным? Я использую его для Twitter Bootstrap 3.

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

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

Одним из таких примеров является конвейер Rails. Все преимущества, ни одна из слабых сторон. :)

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL