что такое html препроцессоры простыми словами

За что ты послал нам препроцессоры? Чем мы тебя прогневали?

Что такое препроцессоры CSS и зачем они нужны.

В наших проектах в Коде мы используем простой CSS-код. Он компактный и понятный. Но у нас маленькие проекты.

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

Что такое препроцессоры

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

Представьте, что у вас в проекте 30 разных стилей CSS-кнопок. Они нужны для разных дел: одни опасные, другие безопасные, одни активные, другие выключены и т. д. И есть ещё формы ввода и другие интерфейсные элементы, внешний вид которых прописан в CSS.

И вот у всех этих элементов сейчас стоит параметр border-radius: 7px, то есть скругление по углам — семь пикселей. И вдруг приходит дизайнер и говорит: «Всё пропало, ставь скругление 8 пикселей!» Вы терпеливо заходите в CSS-файл и в 30 местах меняете 7px на 8px.

Приходит дизайнер и говорит: «Миша, всё ерунда, давай по новой. Теперь 6 пикселей». Можно запустить в дизайнера стулом, а можно использовать препроцессор.

С препроцессором у вас 30 кнопок, в которых будет вот так:

border-radius: $defaultBorderRadius

А где-то в отдельном месте документа будет один раз написано:

$defaultBorderRadius: 7px;

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

Какие бывают препроцессоры CSS

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

Любопытно, что у Sass есть два синтаксиса:

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

Stylus и другие. Есть и другие препроцессоры — например, тот же Stylus. Принципиально он делает то же самое, но использует другой синтаксис, более лаконичный и простой.

Какой выбрать?

По сути все они делают одно и то же: упрощают работу с CSS-кодом, поэтому это вопрос вкуса и привычек. Если давать общие рекомендации, мы бы сделали так:

Когда использовать препроцессоры

Если у вас CSS-код занимает не больше одной-двух страниц, нет смысла использовать препроцессоры: настройка и описание кода займёт больше времени, чем сразу написать то, что нужно. А вот если у вас большой сайт с разным дизайном на странице или очень сложная CSS-вёрстка, то тут уже пригодятся препроцессоры.

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

Переменные. Если вы используете один и тот же фирменный цвет для ссылок, рамок вокруг картинок, то можно задать этот цвет в одном месте, а потом обращаться к нему откуда угодно. Зададим переменными ширину и цвет элемента:

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

Было: SCSSСтало: CSS

a < color: #0f7afc; &:hover < color: #cf0000; >&:visited < color: #800080; >> a < color: #0f7afc; >a:hover < color: #cf0000; >a:visited

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

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

Чем больше однотипного кода используется в CSS-файле, тем проще из этого сделать один миксин.

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

Преимущества и недостатки препроцессоров

Так как все CSS-препроцессоры делают примерно одно и то же, только немного разными способами, то сильные и слабые стороны у них будут одни и те же:

✅ Хорошо подходят для больших проектов.

✅ Сильно расширяют возможности обычного CSS.

✅ Упрощают работу с однотипным кодом.

✅ Проще вносить изменения и поддерживать код в актуальном состоянии.

✅ Сразу видна логическая структура CSS, легко разобраться в том, из чего состоит каждый элемент.

❌ Нет смысла использовать в маленьких проектах и простых страницах.

❌ На выходе препроцессора получается CSS-код, который сложно прочитать человеку.

❌ Нужно изучать что-то кроме самого CSS.

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

С чего начать

Sass → почитайте sass-scss.ru, там есть всё, что нужно знать для работы с этим препроцессором. Документация настолько подробная, что её можно освоить вообще без опыта работы с таким инструментом.

LESS → Путеводитель для новичков по CSS-препроцессору Less. Просто, доходчиво и с кучей примеров для каждой команды.

Stylus → если знаете английский, почитайте официальный сайт проекта. Если не знаете — почитайте краткое руководство по использованию и опыт разработчиков Яндекс.Почты.

Источник

Что такое препроцессор HTML?

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

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

Препроцессор HAML: Haml означает язык разметки абстракции HTML, созданный Хэмптоном Кэтлином, и единственная цель его создания — сделать разметку красивой. По сути, это препроцессор на основе Ruby, и для его установки требуется Ruby. Препроцессор HTML также можно понять, поскольку это программа, которая помогает разработчику сгенерировать синтаксис HTML из синтаксиса препроцессора. Он добавит некоторые уникальные функции, которых нет в синтаксисе чистого HTML. Следовательно, Haml разработан, чтобы избежать написания встроенного кода для веб-документов, который сделает HTML более чистым, а также обеспечивает гибкость, позволяющую иметь некоторый динамический контент в HTML. Поскольку препроцессоры — это программы, они всегда обрабатываются на некоторых языках, поэтому Haml обрабатывается в HTML и Sass. Мы выполним следующие шаги, чтобы установить HAML:

Для установки HAML:

Для преобразования HAML в HTML:

Примечание. Команда должна выполняться в том же каталоге, где находится индексный файл.

Пример 1

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

Источник

Почему стоит использовать препроцессоры

что такое html препроцессоры простыми словами. image loader. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-image loader. картинка что такое html препроцессоры простыми словами. картинка image loader. Что такое препроцессоры CSS и зачем они нужны.У меня достаточно неплохой опыт в верстке — несколько лет.
За это время было многое — и табличная верстка, и собственные фреймворки, и IE6, и адаптивный дизайн, да что угодно — я всегда старался быть рядом с bleeding edge, как говорится.
Больше CSS-фреймворков (привет, бутстрап) и Emmet-а мне нравятся препроцессоры и я расскажу, почему. Возможно, покажется, что моя статья несколько устарела и сейчас все используют препроцессоры как само собой разумеющееся, но, увы, это не так. Недавно я встретил человека, который говорил о том, что ему быстрее писать CSS-код, нежели использовать препроцессоры. Мы долго спорили, на самом деле, ну очень долго, в итоге я решил выложить свои мысли здесь, в одном месте.

Less или Sass?

Ну, на самом деле, это дело каждого. Мне не нравился Sass из-за его медлительности — Less побыстрее выполнялся всегда, в итоге в один момент я решил перейти на Less, но через некоторое время оказалось, что мне не хватает его мощности! Увы, я так и не нашел, как реализовать банальный миксин уровня вот этого.
Но и медлительность Sass не устраивала, но именно в тот момент, когда я хотел обратно вернуться на Sass, но терзался сомнениями, мне посоветовали libsass, а т.к. я использую Grunt — мне было достаточно подключить только grunt-sass (и ничего больше, например, установка Ruby и гемов). Для меня выбор был ясен и с тех пор — только libsass. Мощность самого Sass и с скорость C — что еще нужно?
Stylus я пока не пробовал, как-нибудь потом.

Почему все-таки препроцессоры?

Переменные
Вложенность

Что может быть лучше вложенности :hover, :after, :before, :nth-child в родительский элемент?
Простой, очень простой пример:

Миксины, импорты и т.п.

Самый главный плюс препроцессоров — это в миксинах, экстендах и т.п. Это как функции в нормальном языке — можно использовать бесконечное количество раз, подключая когда необходимо. Лично я не так часто использую миксины, но т.к. я верстаю с подходом mobile first, мне очень сильно помогает один маленький миксин, о котором я уже упомянул:

Используется достаточно просто, как @media-queries: @include responsive(sm) < background-color: red >и это вместе с вложенностью элементов.

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

«Я не могу разобраться в сгенерированном коде»

Когда я услышал этот аргумент, я не совсем понял, о чем шла речь. Затем мне разъяснили (человек работает на фрилансе) — к нему поступает проект с Sass или Less, но сгенерированный код ужасен, в нем нельзя разобраться. И это неправильный подход, потому что препроцессоры — для людей, для того, чтобы было удобно разрабатывать, держать архитектуру проекта в нормальном состоянии. Если человек пишет нормально, CSS на выходе получается оптимизированным, с этой стороны нет никакой разницы, на чем было написано — на CSS или Sass, Sass лишь помогает разработчику, а не браузеру. Для поддержки браузером есть Source maps, поддержка которых в нормальных инструментах типа Grunt есть из коробки.

Пример

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

Источник

О CSS-препроцессорах и фреймворках: зачем они нужны и с чем их едят

что такое html препроцессоры простыми словами. 55fec6156a2ad09c94d322c8fb43fd33. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-55fec6156a2ad09c94d322c8fb43fd33. картинка что такое html препроцессоры простыми словами. картинка 55fec6156a2ad09c94d322c8fb43fd33. Что такое препроцессоры CSS и зачем они нужны.

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

Немного о CSS

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

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

Что такое препроцессор и зачем он нужен?

CSS-препроцессор – это программа, позволяющая генерировать CSS-код, используя уникальный синтаксис, присущий только конкретному препроцессору.

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

что такое html препроцессоры простыми словами. 8a08f53b11df9d4e0686bd96bcce2a93cd802799. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-8a08f53b11df9d4e0686bd96bcce2a93cd802799. картинка что такое html препроцессоры простыми словами. картинка 8a08f53b11df9d4e0686bd96bcce2a93cd802799. Что такое препроцессоры CSS и зачем они нужны.

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

Что такое фреймворки и для чего они нужны?

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

Фреймворки сильно отличаются друг от друга и имеют разные подходы, но у них общие цели:

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

Добавить в сайт или приложение кроссбраузерность.

Вынудить команду разработчиков следовать определенным правилам дизайна.

Корректно выровнять все элементы на странице.

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

Особенности препроцессоров

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

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

Переменные

Да, они есть и в «чистом» CSS, но реализованы менее удобно.

Вложенность

Благодаря препроцессорам не нужно каждую строку прописывать отдельно. В них действуют элементарные правила вложенности, как и в структуре HTML.

Mixins

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

Математические выражения

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

If/Else-выражения

В некоторых препроцессорах поддерживаются логические операции.

Функции

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

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

4 популярных CSS-препроцессора

Есть несколько распространенных дополнений к CSS, используемых чаще остальных:

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

LESS – более простой с точки зрения синтаксиса препроцессор, но более ограниченный с функциональной точки зрения. При этом имеет более качественную поддержку в большинстве IDE и отлично подходит для новичков и несложных сайтов. что такое html препроцессоры простыми словами. bb47ad15670443c9b3461c9045bb3f8dadced0ae. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-bb47ad15670443c9b3461c9045bb3f8dadced0ae. картинка что такое html препроцессоры простыми словами. картинка bb47ad15670443c9b3461c9045bb3f8dadced0ae. Что такое препроцессоры CSS и зачем они нужны.

Stylus – интересный язык, в заметной степени меняющий представление о том, как оформляется CSS. Он напоминает Python, где отсутствуют многие скобки и спецсимволы.

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

Краткий обзор лучших CSS-фреймворков

Фреймворки не просто модифицируют синтаксис и добавляют пару дополнительных опций. Здесь несколько иные масштабы, и с ними нередко полностью меняется подход к оформлению страниц.

Bootstrap

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

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

что такое html препроцессоры простыми словами. 1ad000e196ff9e860db97ce49ef44818e2663862. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-1ad000e196ff9e860db97ce49ef44818e2663862. картинка что такое html препроцессоры простыми словами. картинка 1ad000e196ff9e860db97ce49ef44818e2663862. Что такое препроцессоры CSS и зачем они нужны.

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

Foundation

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

Foundation более сложный с точки зрения структуры. Включает в себя CSS-, HTML- и JavaScript-файлы, работает на базе SASS. Для установки и настройки используется фирменная консольная утилита.

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

Bulma

Это очередной аналог Bootstrap, предлагающий быстро собрать сайт на шаблоне, но он отличается от своего конкурента упрощенной структурой файлов, так как полностью написан на CSS и не требует подключения JavaScript для нормальной работы.

Из интересных функций стоит отметить наличие компонента для быстрой реализации темной темы на сайте. Также Bulma поддерживает препроцессор SASS.

что такое html препроцессоры простыми словами. 22764b1d820bd71b3f9f01e31faa6a99ce5e234a. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-22764b1d820bd71b3f9f01e31faa6a99ce5e234a. картинка что такое html препроцессоры простыми словами. картинка 22764b1d820bd71b3f9f01e31faa6a99ce5e234a. Что такое препроцессоры CSS и зачем они нужны.

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

TailwindCSS

Стремительно набирающая обороты технология, практически исключающая CSS-синтаксис из приложений и сайтов. Благодаря TailwindCSS можно прописывать стили прямо в HTML-классы. Да, это похоже на то, как работают inline-стили, но не совсем, потому что TailwindCSS, помимо прочего, предлагает собственный синтаксис.

Например, вместо background-color: white используется сокращение bg-white. И таких вариаций много. Благодаря сокращенном директивам удается достичь опрятного вида при прописывании стилей прямо в HTML-классы.

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

TailwindCSS избавляет от необходимости генерировать дополнительные файлы и возиться с селекторами. При этом не лишает свободы творчества и не сказывается на производительности приложения.

Skeleton

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

Skeleton по умолчанию адаптивный и идеально выглядит на экране любого размера. Но какой-то роскоши с точки зрения дизайна ожидать не стоит. Разработчики сделали все, чтобы предельно упростить стили в Skeleton. Здесь всего три цвета: белый, серый и голубой. Один вариант оформления списков, один вариант оформления кнопок.

Как и другие фреймворки, Skeleton поддерживает семантическую верстку. Вместо конкретных значений в духе grid-column-start: 3 можно написать grid-third, и объект расположится в нужном месте.

что такое html препроцессоры простыми словами. 805e01e289974d97f661e6327cf3e184b5d1389b. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-805e01e289974d97f661e6327cf3e184b5d1389b. картинка что такое html препроцессоры простыми словами. картинка 805e01e289974d97f661e6327cf3e184b5d1389b. Что такое препроцессоры CSS и зачем они нужны.

Идеально подходит тем, кому нужно быстро собрать сайт и кому не нравится стандартный синтаксис CSS.

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

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

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

Вместо заключения

Как видите, способов упростить работу с CSS много, и вы можете выбрать тот подход, который вам по душе. Не нравится синтаксис? Установите препроцессор или TailwindCSS. Не хочется с нуля придумывать дизайн? Установите Skeleton или его аналог. Хочется с ходу получить готовое решение? Тогда Bootstrap в помощь.

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

Источник

Html препроцессор nunjucks

что такое html препроцессоры простыми словами. thumb 800 400 0 0 auto. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-thumb 800 400 0 0 auto. картинка что такое html препроцессоры простыми словами. картинка thumb 800 400 0 0 auto. Что такое препроцессоры CSS и зачем они нужны.

Что такое html препроцессор

HTML препроцессор — это скрипт, который преобразует определенный формат языка разметки в обычный HTML. Зачем же он нужен? Чем не устраивает обычный html? Основная причина — это удобно, это ускоряет процесс верстки сайта.

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

Также, представьте, что у вас на странице список из более 10 карточек товара, и нужно в каждой внести изменения. HTML препроцессор позволяет хранить информацию в массиве объектов и выводить список элементов в цикле. Это гораздо удобнее чем менять в разметке HTML.

Основные преимущества использования HTML препроцессоров:

Список html препроцессоров:

Вот список из наиболее известных HTML препроцессоров:

Шаблонизатор nunjucks

По сути, Nunjucks — это мощный шаблонизатор для JavaScript. Его можно использовать как в браузере, на стороне клиента, так и на стороне сервера Node.js. Но также, Nunjucks очень удобно применять для верстки сайтов.

Почему именно Nunjucks?

Как пользоваться шаблонизатором html nunjucks (gulp nunjucks)

Для этого проще всего использовать сборщик проектов gulp и модуль gulp-nunjucks. Устанавливать их будем с помощью утилиты npm (для этого предварительно нужно установить Node.js себе на компьютер).

Заходим с консоли в папку с проектом и инициализируем npm:

В результате получим файл package.json, в котором описываются все зависимости и настройки.

Далее устанавливаем gulp и gulp-nunjucks:

Создаем файл gulpfile.js. В нем находятся наборы команд для gulp. Пример простой конфигурации для nunjucks:

Чтобы бы не устанавливать gulp глобально, открываем файл package.json, в раздел scripts добавляем строчку:

В итоге получаем такой файл package.json:

Это простой пример настройки gulp для демонстрации работы nunjucks. Более подробно, как работать с gulp, мы рассмотрим в следующих статьях.

Далее создадим в корне проекта папку src и dist. В src находится исходники nunjucks. Gulp будет отслеживать изменение в этом каталоге и сохранять готовые html файлы в папку dist.

Чтобы запустить gulp, в командной строке пишем:

Пример работы с nunjucks

И так, мы подготовили окружение, настроили gulp, и можем пробовать nunjucks в деле. Для примера, возьмем простой bootstrap шаблон, состоящий из 3-х страниц, написан на обычном html, и переделаем его на шаблонизаторе nunjucks.

Наследование шаблонов

Nunjucks дает возможность наследовать шаблоны. Другими словами, вы можете создавать страницы сайта по заранее созданным шаблонам. Наследование работает через конструкции block и extends.

Посмотрим на наш пример: что такое html препроцессоры простыми словами. nunjucks layouts. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-nunjucks layouts. картинка что такое html препроцессоры простыми словами. картинка nunjucks layouts. Что такое препроцессоры CSS и зачем они нужны.

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

Создаем в каталоге src папку layouts. В ней создаем файл нашего основного шаблона default.html. Копируем туда все общее, что есть на всех страницах, а вместо изменяемой части пропишем конструкцию block:

И так, мы добавили <% block content %> <% endblock %>в то место, где подставляется основная информация страницы. Также добавили <% block aside %> <% endblock %>для вывода сайтбара, но между этими тегами вставили блок по умолчанию, так как на большинстве страницах он одинаковый.

В папке src создаем файл index.html, в нем наследуем наш базовый шаблон и в блоке content мы можем подставить содержимое страницы сайта:

В итоге получим: что такое html препроцессоры простыми словами. nunjucks layouts. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-nunjucks layouts. картинка что такое html препроцессоры простыми словами. картинка nunjucks layouts. Что такое препроцессоры CSS и зачем они нужны.

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

Создаём все недостающие страницы и подставим актуальную информацию на всех страницах.

Вернемся к странице контакты. Помимо контентной части, в ней необходимо переопределить сайтбар:

Включение одного шаблона в другой (nunjucks include)

Nunjucks позволяет вставлять содержимое одного файла в другой. Это дает возможность выносить в отдельные файлы разметку повторяющихся блоков. Такой подход сделает наш код более удобным и простым в поддержке. Вставка одного файла в другой осуществляется конструкцией include:

Давайте на нашем сайте header, footer и sitebar вынесем в отдельные файлы. В папке src создадим каталог parts, в которой будем сохранять все различные части кода.

Создаем файлы header.html, footer.html и sidebar.html. С основного шаблоны вырезаем необходимые части, а в место них прописываем конструкцию include. В итоге файл default.html будет выглядеть так:

Так же, на странице контакты нам необходимо подключить файл sidebar.html, так как мы переопределяем на ней сайтбар:

Переменные (nunjucks Variables)

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

В nunjucks переменные задаются следующей конструкцией:

Вывод содержимого переменной:

Посмотрим на шаблон default.html. В нем title и заголовок страниц жестко прописаны в коде. Это нам не подходит, так как эти значения разные на всех страницах. Поэтому, на каждой странице заведем переменные title и pageName и добавим их в начале страниц:

В шаблоне выведем эти значения:

В итоге, у каждой страницы свой title и заголовок.

Nunjucks import

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

Давайте еще посмотрим на наш сайт. В верхней части и в сайтбаре выводится контактная информация: что такое html препроцессоры простыми словами. global var. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-global var. картинка что такое html препроцессоры простыми словами. картинка global var. Что такое препроцессоры CSS и зачем они нужны.

Ее также удобно сохранять в переменные. Но эти переменные касаются всего сайта, а не отдельных страниц. Поэтому, создадим файл, где будем сохранять глобальные переменные для всего сайта и импортируем его в основном шаблоне. Создаем папку data в src, в ней файл data.html. В самом начале файла default.html прописываем конструкцию import:

Теперь можно получить доступ ко всем значениям в data.html через переменную data.

В data.html добавим 2 переменные:

Теперь в файлах header.html и contact.html выводим эти переменные:

Условия (Nunjucks if)

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

Также есть возможность указать альтернативные условия с помощью конструкций elseif и else:

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

На каждой странице добавим еще по одной переменной:

Этими переменными мы задаем уникальное название (ярлык) для каждой страницы.

Далее, в основном шаблоне задаем условие для вывода навигационной цепочки:

Если переменная pageSlug не равна home, то мы выводим блок с контентом. Таким образом, мы выводим хлебные крошки на всех страницах, кроме главной.

Тернарный оператор (If Expression)

Тернарный оператор — конструкция, которая возвращает второе или третье значение, в зависимости от логического выражения. Нечто подобное есть и в nunjucks:

Если условие истинно, то выведется home, в противном случае default.

На нашем тестовом сайте в навигациях не определяется активная страница. Заходим в файл header.html, находим место где выводится меню и применим тернарный оператор:

Тоже самое делаем в файле sidebar.html:

Циклы

Циклы — это операция, при которой одно и то же действие выполняется несколько раз. В nunjucks так же есть конструкция для организации циклов:

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

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

На страницах, где необходимо выводить хлебные крошки, зададим массив с необходимыми элементами:

В основном шаблоне выведем элементы навигационной цепочки:

В цикле мы проверяем, если элемент массива последний, то выводим его как активный.

Так же, давайте выведем наше меню в цикле. Для этого в файле data.html создадим массив с элементами навигации:

Выведем меню в файле header.html:

Аналогично в файле sidebar.html:

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

Макросы (macro)

Макросы позволяют определить фрагменты кода, которые можно использовать многократно в любом шаблоне. Это похоже на функции в языках программирования. Пример синтаксиса макроса:

Теперь макрос с примера можно вызвать неограниченное количество раз:

В первом варианте мы передаем один параметр, а значение isAdmin задана по умолчанию, во втором варианте мы передаем два аргумента.

Рассмотрим работу с макросами на примере. На главной странице и странице сервисы есть одинаковый блок со списком элементов, но разным содержимым: что такое html препроцессоры простыми словами. macro. что такое html препроцессоры простыми словами фото. что такое html препроцессоры простыми словами-macro. картинка что такое html препроцессоры простыми словами. картинка macro. Что такое препроцессоры CSS и зачем они нужны.

Выведем этот блок с помощью макроса. Создаем в папке src каталог macro. В нем файл macro.html, в котором будем хранить все наши макросы. Как и в случае с файлом переменных, импортируем его в основной шаблон:

Далее создаем наш макрос, назовем его ItemList, в который передается массив с необходимыми данными:

После этого вызываем макрос в нужных местах, передавая в него необходимые значения. Файл index.html:

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

Фильтры (Nunjucks filters)

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

На пример, фильтр abs возвращает абсолютное значение аргумента:

Фильтры можно выстраивать в цепочки для последовательной обработки данных:

Пример использования фильтра посмотрим на нашем сайте. Ранее мы создали переменную phone и присвоили ей значение (123) 456-7890. Далее необходимо вывести телефон ссылкой в таком формате:

То есть, вырезать с переменной все лишние символы и оставить только числа. Для этого применим фильтр replace:

Выводим эту конструкцию в файлах header.html:

Выводы

Мы рассмотрели основные моменты использования шаблонизатора nunjucks. Для примеры создали небольшой сайт на этом препроцессоре. Готовый результат можно посмотреть в репозиторие. Для более подробного изучения можно воспользоваться официальной документацией по nunjucks.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *