Как подключить less к html

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

Препроцессор less существенно упрощают и оптимизируют верстку сайтов и превращают таблицу стилей в полноценный язык программирования.

Есть несколько вариантов работы с препроцессром less:

Компиляция css файла на стороне сервера

Компиляция css файла на стороне клиента В данном случае недостаток очевиден, компиляция требует времени и эта задержка скажется на скорости открытия страницы

Компиляция css файла на стороне клиента причем на production server (рабочий сервер) мы публикуем только скомпилированный файл css. Это позволяет нам вести разработку на локальной машине используя все возможности данного препроцессора, а сам сайт не будет выполнять дополнительную работу по компиляции нашего css файла.

В данной статье мы рассмотрим именно третий вариант

Установка less

Установка less.js Так как препроцессор less онован на JavaScript, то сначала мы должны скачать и подключить данный файл (Можно использовать less.min.js если Вы уверены, что Вам не придётся вносить в него правки). Данный файл можно скачать с официального сайта.

Подключаем файл less.js Для этого необходимо прописать в вашем html документе следующую строку:

Создать файл style.less

Подключаем файл style.less

Устанавливаем node.js Скачиваем с официального сайта.

Устанавливаем пакет less В командной строке пишем следующий код:

Синтаксис данной команды:

npm — пакетный менеджер;
i — сокращение от install, то есть «установить»;
-g — флаг, который указывает на то, что пакет будет установлен глобально;
less — имя устанавливаемого пакета;

Компилирование файла style.less

— Без сохранения результата в файле style.css

— C сохранением результата в файле style.css

$ lessc style.less > style.css

Для автоматической перекомпиляции less файлов в css можно установить программу koala, по ссылке на официальный сайт.

Источник

Импорт стилей

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

Импорт стилей в CSS

В CSS директива @import позволяет импортировать стили из других таблиц. Проще говоря, можно разбить одну большую таблицу стилей на несколько маленьких. Делается это следующим образом:

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

Разрешено делать только так:

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

Импорт стилей в Less

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

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

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

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

Файлы без расширения:

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

Файлы с другими расширениями:

Пример 2.6.1

Для наглядности я предлагаю посмотреть на карту директории этого примера:

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

Содержимое файла _styles.less :

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

Опции импорта

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

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

Опция (less)

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

Пример 2.6.2

Необходимо подключить файл _mail.css :

Опция (css)

Пример 2.6.3

На этот раз стоит задача подключения файла стандартным для CSS способом. Без лишних слов. Просто посмотрите на код:

Опция (reference)

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

Пример 2.6.4

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

В файле _styles.less добавим ключевое слово (reference) :

Если сейчас скомпилировать этот файл, то кроме селектора canonium в нём ничего не будет. Необходимо добавить явный вызов селектора.

Опция (inline)

Пример 2.6.5

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

Добавим в файл _mail.css класс, содержащий свойство filter :

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

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

Опция (once) и (multiple)

Я не зря объединил эти две опции. Они представляют собой абсолютную дуальную пару, то есть они полностью противоположны по значению.

Ключевое слово (once) запрещает многократное подключение файла с таким именем. Эта опция включена в Less изначально, и прописывать её в директиве @import не нужно.

Ключевое слово (multiple) разрешает многократное подключение файла с таким именем.

Пример 2.6.6

Объявим директиву @import без опций:

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

Объявим директиву @import с опцией (once):

И снова тот же результат. Очевидно, что опция (once) все таки установлена по умолчанию, а её повторное применение ничего не меняет.

Объявим директиву @import с опцией (multiple):

Опция (optional)

Пример 2.6.7

Мысли и советы

Несколько советов, которые позволят сделать ваш код лучше на этом этапе:

Источник

Введение в LESS

Что такое LESS?

LESS был создан Alexis Sellier под влиянием более раннего метаязыка стилей SASS (Syntactically Awesome Stylesheets). Одной из особенностью LESS является то, что он может работать как на клиентской стороне, так и на стороне сервера. Язык стилей LESS это продукт с открытым исходным кодом, который строится на языке программирования JavaScript.

Подключение LESS

Начнем с первого варианта:

По аналогии с каскадными таблицами стилей вам необходимо подключить файл *.less к Вашему HTML документу с использованием тега :

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

Давайте перейдем к рассмотрению примера в котором начнем использовать 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.

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

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

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

Источник

Как подключить less к html

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

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Анимация фона при прокрутке страницы

Анимируем SVG фигуры при прокрутке страницы.

Пример 3D помещения выставки

Экспериментальная 3D проекция помещения галереи.

Источник

Установка препроцессора LESS

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

Для работы нам потребуется NODE.JS и пакетный менеджер npm

Установка NODE.JS и NPM

Первым делом нам необходимо скачать NODE.JS с официального сайта https://nodejs.org/
Чтобы проверить всё ли мы правильно установили, откроем терминал и введём две команды:

Данные команды выводят версию node.js и npm

Способы компиляции LESS

Есть несколько способов как можно компилировать less:

Через IDE PHP STORM

Если вы работаете в IDE PHP STORM, то создайте новый проект, откройте терминал программы и напишите данную команду в нем.

Чтобы установить компиляцию Less в PHP STROM необходимо выполнить следующие действия:

Компиляция через Терминал

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

Компиляция через HTML файл

Неудобство данного способа в подключении избыточного файла less.js.

var less = require(‘less’); var fs = require(‘fs’); var lessContent = fs.readFileSync(‘style.less’, ); less.render(lessContent, function(err, output)< if(err) throw new Error(err); fs.writeFileSync('rez_style.css', output.css); >);

Теперь в терминале вызовем наш файл:

Компиляция через GULP

Создаём файл зависимостей packege.json

Установка пакетов less gulp без сохранения на продакшене

Установка дополнительный пакетов

Источник