Введение — HTML: Препроцессор Pug
Разметка страницы — один из самых мучительных процессов для любого разработчика. Дело не в сложности самой разметки, а в её реализации: открывающие и закрывающие теги, отсутствие разделения шаблона на компоненты, визуальная проблема определения вложенности той или иной секции. Для решения этих проблем были придуманы HTML-препроцессоры — интерпретаторы, которые переводят разметку с собственного языка на язык разметки HTML.
В этом курсе мы изучим популярный препроцессор Pug, с помощью которого научимся:
- Не дублировать разметку.
- Использовать шаблоны.
- Разделять шаблон на блоки и выносить их в отдельные файлы.
- Подключать дополнительные модули для обработки информации в других форматах.
- Использовать JavaScript для добавления логики при работе с шаблоном.
- Работать с условными конструкциями.
Всё это позволит писать поддерживаемый код, который будет автоматически переводиться в обычный HTML.
Практика
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Препроцессоры
Кроме свободного владения базовыми технологиями (HTML, CSS и JavaScript), разработчик должен уметь использовать множество вспомогательных инструментов. Один из таких инструментов это CSS-препроцессор — надстройка расширяющая CSS-синтаксис, облегчающая написание, поддержку и рефакторинг кода. Препроцессоры позволяют использовать конструкции которые ускоряют и упрощают написание кода.
Самые популярные препроцессоры это SASS, LESS и Stylus. Все они похожи и решают одну задачу, поэтому достаточно выбрать и использовать один. Самый популярный препроцессор — SASS и его синтаксис SCSS.
- Совместимость — синтаксис препроцессора полностью совместим с уже существующими CSS-правилами. Готовый CSS-код можно вставить в SASS-файл, но не наоборот.
- Богатый функционал — большое количество вспомогательных конструкций для упрощения основных задач при написаниеи CSS-кода.
- Структура проекта — препроцессор позволяет писать стили в отдельных файлах, что повышает качество структуры проекта и поиск стилей отдельных блоков.
- Чистота кода — из-за того что стили пишутся в отдельных файлах и применяются вспомогательные конструкции для повторного использования кода, он становится чище.
- Синтаксис — дополнительные конструкции препроцессора это новый синтаксис, который необходимо выучить и привыкнуть использовать.
- Компиляция — шаг подготовки кода препроцессора для браузера, то есть преобразование всех синтаксических конструкций в обычный CSS.
Синтаксис
Вначале препроцессор SASS имел одноимённый синтаксис — SASS . Для описания вложенности он использует отступы (пробелы или табы), вместо фигурных скобок, что понижает читабельность и повышает вероятность сделать ошибку. Файлы с этим синтаксисом имеют расширение .sass , например main.sass .
/* ❌ Старый синтаксис SASS */ .box width: 400px; height: 400px; background-color: teal; &:hover background-color: orange;
Сегодня используется синтаксис SCSS (Sassy CSS), который является расширением оригинального CSS-синтаксиса . Это значит, что любое допустимое значение в CSS-стилях будет работать и в SCSS. Файлы с этим синтаксисом имеют расширение .scss , например main.scss .
/* ✅ Новый синтаксис SCSS */ .box width: 400px; height: 400px; background-color: teal; &:hover background-color: orange; > >
Компиляция
Браузер не понимает синтаксиса специальных конструкций SASS, поэтому код препроцессора необходимо преобразовать (скомпилировать) в CSS. Способов компиляции довольно много, различные консольные утилиты, сборщики и плагины редактора.
Процесс разработки сводится к следующим шагам.
- Настраиваем инструмент для компиляции SASS-кода.
- Пишем код в файлах с расширением .scss .
- SASS автоматически компилируется в CSS и создаётся CSS-файл.
- Подключаем скомпилированный CSS-файл в index.html .
- Для тренировки синтаксиса можно использовать интерактивную площадку SassMeister.
- В редакторе VSCode есть расширение Live Sass Compiler, для компиляции SASS.
- Можно воспользоваться удобным приложением Scout-App.
Дополнительные материалы
- Документация SASS
- Эстетичный Sass
Препроцессоры
Процесс написания HTML и CSS может оказаться несколько изнурительным и требовать множества одних и тех же задач снова и снова. Таких задач, как закрытие тегов в HTML или монотонный просмотр шестнадцатеричных значений цвета в CSS.
Такие разные задачи, как правило, небольшие, чуть-чуть снижают эффективность. К счастью, эти и несколько других неэффективных задач были признаны и вызов им бросили препроцессоры.
Препроцессор — это программа, которая берёт один тип данных и преобразует его в другой тип данных. В случае HTML и CSS, одни из наиболее популярных языков препроцессора — это Haml и Sass. Haml преобразуется в HTML, а Sass преобразуется в CSS.
После своего становления, при решении некоторых наиболее распространённых проблем, Haml и Sass нашли много дополнительных способов для расширения возможностей HTML и CSS. Не только путём удаления неэффективных задач, но также созданием методов, делающих разработку сайтов проще и логичнее. Популярность препроцессорам также принесли различные фреймворки, которые их поддерживают; одним из наиболее популярных является Compass.
Haml
Haml (HTML abstraction markup language, абстрактный язык разметки HTML) — это язык разметки с единственной целью — предоставить возможность писать красивую разметку. Являясь собственным языком разметки, код, написанный на Haml, позже преобразуется в HTML. Haml продвигает принцип «не повторяйся» и способствует хорошо структурированной разметке, создавая приятный опыт для тех, кто умеет её писать и читать.
Установка
Haml требует Ruby для компиляции в HTML, поэтому первый шаг для его использования — убедитесь, что установлен Ruby. К счастью для тех, кто работает на Mac OS X, система поставляется с предустановленным Ruby, а те, кто работают на Windows, могут перейти к установщику напрямую. После установки Ruby выполните следующую команду, используя Terminal или программу командной строки.
gem install haml
Файлы, написанные на Haml, должны сохраняться с расширением файла .haml. Чтобы затем преобразовать эти файлы из Haml в HTML команда haml ниже должна быть запущена для компиляции каждого отдельного файла.
haml index.haml index.html
В приведённом выше примере файл index.haml преобразован в HTML и сохранён как index.html в той же папке. Эта команда должна быть запущена в той же папке, в которой расположены файлы. В случае, если команда будет работать вне этой папки, путь к ней должен быть включён в команду. В любое время также может быть запущена команда haml —help для просмотра списка разных доступных опций.
Слежение за файлом или папкой
К сожалению, Haml не предлагает способ слежения за изменением файла или папки без использования других зависимостей.
Внутри приложения Rails зависимость Haml может быть добавлена в Gemfile, таким образом, автоматически компилируя файлы Haml в HTML при любых изменениях. Есть несколько настольных приложений, доступных для тех, кто не пользуется Rails, одним из наиболее популярных является CodeKit.
CodeKit также поддерживает другие препроцессоры, которые тоже могут вам пригодиться.
Доктайп
Первая часть при написании документа на Haml — это знание, какой тип доктайпа надо использовать. При работе с HTML-документами основным типом документа будет HTML5. В Haml типы документов определяются тремя восклицательными знаками (. ), затем идёт что-то конкретное при необходимости.
По умолчанию доктайп в Haml — это HTML 1.0 Transitional. Поэтому чтобы сделать его как HTML5, нужно передать цифру пять после восклицательных знаков (. 5).
Объявление элементов
Одной из определяющих особенностей Haml является его синтаксис и то, как объявлять и вкладывать элементы. Элементы HTML, как правило, содержат открывающий и закрывающий теги, однако в элементах Haml есть только один открывающий тег. Элементы начинаются со знака процента (%), а затем отступ определяет вложенность. Отступ в Haml можно выполнить одним или несколькими пробелами, однако важно, чтобы отступы оставались неизменными. Табуляция и пробелы не могут сочетаться друг с другом и одно и то же число табуляций или пробелов должно быть одинаковым на протяжении всего документа.
Устранение необходимости в открывающих и закрывающих тегах, а также обязательная структура с отступами создаёт схему, за которой легко следить. В любой момент времени разметка может быть бегло просмотрена и изменена без труда.
%body %header %h1 Привет, мир! %section %p Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Обработка текста
Текст в Haml может быть размещён на той же строке, что и объявленный элемент или с отступом ниже элемента. Текст не может быть одновременно на той же строке, что и объявленный элемент, и вложенным ниже него; должен быть или тот или другой вариант. Приведённый выше пример можно переписать в следующем виде:
%body %header %h1 Привет, мир! %section %p Lorem ipsum dolor sit amet.
Атрибуты
Атрибуты, как и элементы, объявляются немного по-другому в Haml. Атрибуты объявляются непосредственно после элемента, в фигурных или круглых скобках, в зависимости от того, хотите вы использовать синтаксис Ruby или HTML. Атрибуты в стиле Ruby будут использовать стандартный синтаксис хэша внутри <>, в то время как атрибуты в стиле HTML будут использовать стандартный синтаксис HTML внутри ().
%img "shay.jpg", :alt => "Шэй Хоу"> %img %img(src="https://webref.ru/layout/advanced-html-css/shay.jpg" alt="Шэй Хоу")
Классы и идентификаторы
При желании классы и идентификаторы могут быть объявлены подобно другим атрибутам, однако они также могут быть обработаны несколько иначе. Вместо перечисления атрибутов class и id с их значениями внутри скобок, значение может быть определено непосредственно после элемента. Используя либо точку для классов, либо решётку для идентификатора, значение может быть добавлено сразу после элемента.
Кроме того, атрибуты могут быть смешаны, соединяясь вместе в соответствующем формате. Классы должны разделяться точками, а другие атрибуты могут быть добавлены с помощью одного из ранее изложенных форматов.
%section.feature %section.feature.special %section#hello %section#hello.feature(role="region")
Классы и идентификаторы в
В случае, если класс или идентификатор используется в , то %div может быть опущен, а значение класса или идентификатора может быть включено напрямую. Опять же, классы должны определяться через точку, а идентификаторы через решётку.
.awesome .awesome.lesson #getting-started.lesson
Логические атрибуты обрабатываются так же, как если они были бы в Ruby или в HTML, в зависимости от используемого синтаксиса.
%input "checkbox", :checked => true> %input(type="checkbox" checked=true) %input(type="checkbox" checked)
Экранирование текста
Одним из преимуществ Haml является возможность вычислять и запускать Ruby, однако это не всегда желаемое действие. Текст и строки кода можно экранировать с помощью обратной косой черты (\), что позволяет тексту отображаться в явном виде без выполнения.
В приведённом ниже примере, первый образец = @author выполняется Ruby, получая имя авторов из приложения. Второй образец начинается с обратной косой черты, экранирующей текст, и печатается как есть без выполнения.
.author = @author \= @author
Альтернативы экранирования текста
Время от времени экранирования текста недостаточно и Ruby необходим для формирования желаемого выходного результата. Одним популярным примером для этого является попытка включить точку сразу после ссылки, но не как часть текста ссылки. Размещение точки на новой строке не является приемлемым, поскольку это будет рассматриваться как пустое значение класса, вызывая ошибку компиляции. Добавление обратной косой черты перед точкой экранирует символ, однако поставит пробел между последним словом и точкой. Опять же, не производя желаемого результата.
В этих случаях пригодится помощник Ruby. В приведённом ниже примере помощник используется для размещения точки непосредственно после последнего слова, но за пределами текста ссылки.
%p Шэй — = succeed "." do %a "#"> молодец
Комментарии
Подобно элементам и атрибутам, комментарии в Haml обрабатываются немного по-другому. Код может быть прокомментирован достаточно просто с использованием одной косой черты (/). Отдельные строки могут быть закомментированы с помощью косой черты в начале строки, а блоки кода могут быть закомментированы, будучи вложенными под косой чертой.
%div / Строка комментария Актуальная строка / %div Закомментированный блок
Актуальная строка
Закомментированный блок
-->
Условные комментарии
Условные комментарии также обрабатываются по другому в Haml. Чтобы создать условный комментарий используйте квадратные скобки ([]) вокруг условия. Эти квадратные скобки должны быть размещены непосредственно после косой черты.
/[if lt IE 9] %script "html5shiv.js">
Тихие комментарии
Haml также предоставляет возможность создавать особые тихие комментарии. Тихие комментарии отличаются от основных комментариев HTML тем, что после компиляции любое содержание внутри тихого комментария полностью удаляется с этой страницы и не отображается в результатах. Тихие комментарии начинаются с дефиса, затем идёт решётка (-#). Как и с другими комментариями, тихие комментарии могут быть использованы для удаления одной или нескольких строк с помощью вложенности.
%div -# Удалённая строка Актуальная строка
Актуальная строка
Фильтры
Haml предлагает несколько фильтров, позволяющих использовать разные типы ввода внутри Haml. Фильтры начинаются с двоеточия, за которым идёт имя фильтра, к примеру, :markdown, со всем содержимым для фильтрации вложения под ним.
Распространённые фильтры
Ниже приведены некоторые распространённые фильтры, включая наиболее популярную группу :css и :javascript.
- :cdata
- :coffee
- :css
- :erb
- :escaped
- :javascript
- :less
- :markdown
- :maruku
- :plain
- :preserve
- :ruby
- :sass
- :scss
- :textile
Фильтр Javascript
:javascript $('button').on('click', function(event) < $('p').hide('slow'); >);
Фильтры CSS и Sass
:css .container < margin: 0 auto; width: 960px; >:sass .container margin: 0 auto width: 960px
.container
Интерполяция Ruby
Как упоминалось ранее, Haml может вычислять Ruby, а иногда могут возникать случаи, когда Ruby должен вычисляться внутри обычного текста. В этом случае Ruby должен быть интерполирован путём обёртывания необходимого кода на Ruby.
Ниже приведён пример на Ruby, который интерполируется как часть имени класса.
%div "student-#">
SCSS и Sass — это языки препроцессинга, которые компилируются в CSS. Немного напоминают Haml и делают написание кода проще, предлагая для этого совсем немного рычагов. По отдельности SCSS и Sass имеют одно происхождение, однако технически у них разный синтаксис.
Sass (Syntactically Awesome Stylesheets, синтаксически замечательная таблица стилей) пришёл первым и у него строгий синтаксис с отступами. Sassy CSS последовал вскоре после этого, предлагая такую же огневую мощь, что и Sass, но с более гибким синтаксисом, включая возможность писать простой CSS.
Установка
Как и Haml, SCSS и Sass компилируются с помощью Ruby, поэтому Ruby должен быть установлен для создания файлов CSS. Пожалуйста, следуйте вышеприведённым указаниям для установки или убедитесь, что Ruby уже установлен.
После установки Ruby требуется команда gem install sass для установки SCSS и Sass.
gem install sass
Файлы, написанные на SCSS или Sass, должны иметь, соответственно, расширения .scss или .sass. Чтобы преобразовать любой из этих типов файлов в .css необходимо выполнить следующую команду.
sass styles.sass styles.css
Команда выше принимает Sass-файл styles.sass и компилирует его в файл styles.css. Как и с Haml, эти имена файлов являются путями и должны быть указаны правильно. Приведённая выше команда работает, когда эти файлы находятся в папке, из которой выполняется команда. Если файлы находятся за пределами папки, то путь к ним должен быть явно указан в команде.
Если изменения в файле осуществляются постоянно, Sass может следить за файлом и перекомпилировать CSS каждый раз, когда происходит изменение файла. Чтобы Sass следил за файлом, может быть запущена следующая команда.
sass --watch styles.sass:styles.css
Кроме того, вместо компиляции или слежением за отдельным файлом, Sass способен компилировать и отслеживать целые папки. Например, чтобы следить за всей папкой с файлами Sass и конвертировать их в CSS, может быть выполнена команда ниже.
sass —watch assets/sass:public/css
Конвертирование файлов из SCSS в Sass и наоборот
У вас есть возможность конвертировать файлы SCSS и Sass в CSS, но вы также можете конвертировать файлы из SCSS в Sass и наоборот. Чтобы это сделать, может быть использована команда sass, показанная ниже, для преобразования файла SCSS в Sass, а затем файла Sass в SCSS, соответственно.
# Конвертируем Sass в SCSS sass-convert styles.sass styles.scss # Конвертируем SCSS в Sass sass-convert styles.scss styles.sass
Синтаксис
Как уже отмечалось ранее, основное отличие между SCSS и Sass в их синтаксисе и разница эта в деталях. Синтаксис SCSS не сильно отличается по сравнению с обычным CSS. На самом деле, стандарт CSS будет работать внутри SCSS. Sass, с другой стороны, является довольно строгим и любой отступ или ошибки символов запретят компиляцию стилей. Sass опускает все фигурные скобки (<>) и точки с запятой (;), опираясь на отступы и сплошная строка разбивается для форматирования.
.new color: #ff7b29 font-weight: bold span text-transform: uppercase
.new < color: #ff7b29; font-weight: bold; >.new span
SCSS против Sass
Принятие решения о том, что использовать — SCSS или Sass, сводится к личным предпочтениям и это решение принимается на основании того, что лучше всего подходит для конкретной команды и проекта. Плюсы и минусы есть у каждого синтаксиса и все они справедливы.
Лично я предпочитаю синтаксис Sass, поскольку он требует меньше символов и обеспечивает, как я считаю, более чистый синтаксис. Sass не допускает прямой ввод CSS как это делает SCSS и не станет мириться с какими-либо ошибками написания. У Sass чуть лучше кривая обучения, однако она, как я вижу, идёт за счёт лёгкости управления стилями.
Дальнейшие примеры в этом уроке будут использовать Sass, однако они также могут быть все выполнены и на SCSS.
Вложения
В примере с синтаксисом выше вы видели, как селекторы могут вкладываться друг в друга для создания комплексных селекторов. Вложенности быстро идентифицируют селекторы, однако важно не переборщить. Не вкладывайте селекторы без видимых причин, иначе вложенный селектор получит приоритет. Важно использовать определённые селекторы без повышения специфичности.
.portfolio border: 1px solid #9799a7 ul list-style: none li float: left
.portfolio < border: 1px solid #9799a7; >.portfolio ul < list-style: none; >.portfolio li
Вложенные свойства
Кроме вложения селекторов можно также вкладывать свойства. Некоторое наиболее популярное применение этого можно увидеть со свойствами font , margin , padding и border . Как и в вопросе, предпочесть SCSS или Sass, это очень личное решение. Многие считают, что сокращённые значения это хорошо и сыпать значениями в таком длинном формате не требуется. В конечном счёте вам решать, что предпочесть.
div font: family: Baskerville, Palatino, serif style: italic weight: normal
Вложенные медиа-запросы
Отдельные медиа-запросы также могут вкладываться внутрь селектора, меняя значения свойств исходя из состояния носителя.
.container width: 960px @media screen and (max-width: 960px) width: 100%
.container < width: 960px; >@media screen and (max-width: 960px) < .container < width: 100%; >>
Родительский селектор
Sass предлагает способ добавления стилей к предыдущему селектору с помощью родительского селектора, реализуемого с помощью амперсанда (&). Чаще родительский селектор применяется в сочетании с псевдоклассом, таким как :hover , хотя это не всегда так. Кроме того, родительский селектор может быть использован, чтобы связать дополнительные селекторы с его родителем, например &.featured .
a color: #0087cc &:hover color: #ff7b29
a < color: #0087cc; >a:hover
Родительский ключевой селектор
Родительский селектор также может быть использован в качестве ключевого селектора, добавляя отдельные селекторы для создания составных селекторов. Есть множество способов использовать родительский селектор в качестве ключевого, но, пожалуй, один из самых полезных способов — разместить внутри другого селектора.
.btn background: linear-gradient(#fff, #9799a7) .no-cssgradients & background: url("gradient.png") 0 0 repeat-x
.btn < background: linear-gradient(#fff, #9799a7); >.no-cssgradients .btn
Комментарии
Sass обрабатывает комментарии очень похоже на Haml. Стандартный синтаксис CSS / * . * / для комментариев работает, как предполагалось, и в Sass, однако есть также синтаксис тихих комментариев, чтобы полностью удалить комментарий или строки кода из компиляции.
Синтаксис для тихих комментариев — это две косые черты (//). Любое содержание на этой строке или вложенные под ней будут исключены из компиляции. Заметьте, что в приведённом ниже примере строка // Пропущенный комментарий не отображается в скомпилированном CSS.
/* Обычный комментарий */ div background: #333 // Пропущенный комментарий strong display: block
/* Обычный комментарий */ div < background: #333; >strong
Переменные
Переменные являются одной из наиболее востребованных особенностей CSS, которую предлагает Sass. С помощью Sass можно определить переменные, а затем повторно использовать их по мере необходимости.
Переменные определяются знаком доллара ($), за которым следует имя переменной. Между именем переменной и значением идёт двоеточие и пробел ( $font-base: 1em ). Что касается значения переменной — это может быть число, строка, цвет, логическое значение, null или список значений, разделённых пробелами или запятыми.
$font-base: 1em $serif: "Helvetica Neue", Arial, "Lucida Grande", sans-serif p font: $font-base $serif
Интерполяция переменных
Большая часть переменных может быть включена в любом месте внутри документа Sass. Тем не менее, с ними иногда необходимо проводить интерполяцию с использованием синтаксиса. Есть несколько случаев, когда интерполяция переменных необходима, вроде использования в именах классов, именах свойств или внутри строки обычного текста.
$location: chicago $offset: left .# #: 20px
.chicago
Вычисления
Sass также имеет возможность выполнять вычисления разными способами. Расчёты могут справиться с большинством задач, таких как сложение, вычитание, деление, умножение и округления.
Сложение совершается с помощью знака плюс (+) и может завершаться или нет единицами измерения. Когда это сделано с единицей, она связывается с первым числом в уравнении и затем эта единица будет использоваться в вычислении значения. К примеру, десять пикселей плюс один дюйм будет равняться 106 пикселям. Вычитание обрабатывается таким же образом, что и сложение, но со знаком минус (-) вместо этого.
Умножение выполняется с помощью символа звёздочки (*), однако только одно из чисел, если они указаны, может включать в себя единицу измерения. Использование знака процентов (%) возвращает остаток от деления двух чисел, и как с умножением, допускает только одно число, которое содержит единицу измерения.
width: 40px + 6 width: 40px - 6 width: 40px * 6 width: 40px % 6
width: 46px; width: 34px; width: 240px; width: 4px;
Деление
Деление в Sass происходит немного сложнее. Для выполнения деления применяется косая черта (/), которая уже используется в некоторых значениях свойств CSS. Вообще говоря, деление будет иметь место, когда какая-то часть значения использует переменную, если значение оборачивают в скобки или если значение используется как часть другого уравнения.
При использовании в делении одной единицы измерения значение останется в той же единице. При использовании двух единиц измерения, однако, полученное значение будет безразмерным.
width: 100px / 10 width: (100px / 10) width: (100px / 10px) $width: 100px width: $width / 10 width: 5px - 100px / 10
width: 100px/10; width: 10px; width: 10; width: 10px; width: -5px;
Математика в деталях
Как можно ожидать, Sass также способен объединять несколько математических операций. Sass к тому же понимает, какие операции выполнять первыми, основываясь на применении скобок.
$grid: 16 $column: 40px $gutter: 20px $container: ($column * $grid) + ($gutter * $grid) width: $container
width: 960px;
Числовые функции
По умолчанию Sass включает в себя несколько встроенных функций, многие из которых используются для манипулирования числовыми значениями по желанию.
Функция percentage() превращает значение в проценты. Функция round() округляет значение до ближайшего целого числа, по умолчанию округляет вверх, где это необходимо. Функция ceil() округляет значение вверх до ближайшего целого числа, а функция floor() округляет значение вниз до ближайшего целого числа. И, наконец, функция abs() находит абсолютное значение заданного числа.
width: percentage(2.5) width: round(2.5px) width: ceil(2.5px) width: floor(2.5px) width: abs(-2.5px)
width: 250%; width: 3px; width: 3px; width: 2px; width: 2.5px;
Цвет
Sass предоставляет небольшую помощь в работе с цветом, предлагая несколько разных функций для изменения цвета и манипуляций с ним. Одной из наиболее популярных функций в Sass является возможность изменить шестнадцатеричный цвет или переменную и преобразовать его в значение RGBa.
color: rgba(#8ec63f, .25) $green: #8ec63f color: rgba($green, .25)
color: rgba(142, 198, 63, .25);
Кроме чисел, математика может дополнительно применяться и для цвета, используя сложение, вычитание, умножение и деление. Эти вычисления выполняются для красной, зеленой и синей компонент, меняя их как предполагалось.
color: #8ec63f + #666 color: #8ec63f * 2 color: rgba(142, 198, 63, .75) / rgba(255, 255, 255, .75)
color: #f4ffa5; color: #ffff7e; color: rgba(0, 0, 0, .75);
Операции с цветом
Использование операций для вычислений полезно, но может быть немного сложно. В этом случае операции с цветом могут оказаться лучшим вариантом. Эти операции предлагают возможность инверсии цвета, поиска комплиментарных цветов, смешивания цветов или поиска серого значения цвета.
- invert()
- complement()
- mix()
- grayscale()
color: invert(#8ec63f) color: complement(#8ec63f) color: mix(#8ec63f, #fff) color: mix(#8ec63f, #fff, 10%) color: grayscale(#8ec63f)
color: #7139c0; color: #773fc6; color: #c6e29f; color: #f3f9eb; color: #838383;
Операции с HSLa
Операции с HSLa делают дальнейшие шаги, добавляя больше преобразований. Некоторые наиболее популярные операции с HSLa включают lighten() , darken() , saturate() и desaturate() .
- lighten()
- darken()
- saturate()
- desaturate()
- adjust-hue()
- fade-in()
- fade-out()
color: lighten(#8ec63f, 50%) color: darken(#8ec63f, 30%) color: saturate(#8ec63f, 75%) color: desaturate(#8ec63f, 25%) color: adjust-hue(#8ec63f, 30) color: adjust-hue(#8ec63f, -30) color: fade-in(rgba(142, 198, 63, 0), .4) color: fade-out(#8ec63f, .4)
color: white; color: #3b5319; color: #98ff06; color: #89a75e; color: #4ac63f; color: #c6bb3f; color: rgba(142, 198, 63, 0.4); color: rgba(142, 198, 63, 0.6);
Манипуляции с цветом
Кроме операций с цветом Sass также может манипулировать цветом напрямую. Такого рода манипуляции обеспечивает наибольший контроль над тонкой настройкой определённых свойств цвета. С этим контролем также повышается сложность, поэтому манипуляции с цветом делаются несколько реже, чем операции с цветом.
- change-color() — Устанавливает любое свойство цвета
$color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]
- adjust-color() — Манипулирует любым свойством цвета по возрастающей
$color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]
- scale-color() — Гибко масштабирует любым процентом, основываясь на свойстве цвета
$color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]
color: change-color(#8ec63f, $red: 60, $green: 255) color: adjust-color(#8ec63f, $hue: 300, $lightness: 50%) color: scale-color(#8ec63f, $lightness: 25%, $alpha: 30%)
color: #3cff3f; color: white; color: #aad46f;
Расширения
Расширения предоставляют возможность легко обмениваться и повторно использовать стили без явного повторения кода или включать дополнительные классы, предлагая идеальный способ сохранить модульность кода. И элементы и классы могут быть использованы в качестве расширения, также есть селектор-заполнитель, построенный специально для расширений.
Расширения устанавливаются с помощью правила @extend , за которым следует селектор для расширения. Вместо дублирования свойств и значений, оригинальный селектор получает и дополнительный селектор, из которого вызывается расширение.
В целом, это даёт возможность быстро использовать код повторно без увеличения веса кода. Кроме того, расширения приятно сочетаются с OOCSS и SMACSS.
.alert border-radius: 10px padding: 10px 20px .alert-error @extend .alert background: #f2dede color: #b94a48
.alert, .alert-error < border-radius: 10px; padding: 10px 20px; >.alert-error
Селектор-заполнитель
Чтобы избежать создания кучи неиспользуемых классов чисто для расширений, мы можем использовать то, что известно как селектор-заполнитель. Он создаётся со знаком процентов (%) и никогда напрямую не компилируется в CSS. Вместо этого он применяется для прикрепления селекторов, когда они вызываются в расширении. В улучшенном примере ниже обратите внимание, что селектор .alert не переходит в CSS.
%alert border-radius: 10px padding: 10px 20px .alert-error @extend %alert background: #f2dede color: #b94a48
.alert-error < border-radius: 10px; padding: 10px 20px; >.alert-error
Расширение селектора элемента
Как и с классами, расширения также работают со стандартными селекторами элементов.
h2 color: #9c6 span text-decoration: underline .sub-heading @extend h2
h2, .sub-heading < color: #9c6; >h2 span, .sub-heading span
Примеси
Примеси предлагают простой способ создания шаблонов свойств и значений, а затем обмениваться ими между разными селекторами. Примеси отличаются от расширений аргументами, передаваемые туда, где у расширений находятся фиксированные значения.
Примеси определяются с помощью правила @mixin , за которым следуют любые возможные аргументы, затем идут любые правила стилей. Для вызова примеси внутри селектора используется знак плюс (+), за которым следует имя примеси и желаемые значения аргументов при необходимости.
Стоит упомянуть, что SCSS обрабатывает примеси немного иначе. Вместо знака плюс для вызова примеси SCSS использует правило @include .
@mixin btn($color, $color-hover) color: $color &:hover color: $color-hover .btn +btn($color: #fff, $color-hover: #9799a7)
.btn < color: #fff; >.btn:hover
Аргументы по умолчанию
Используя тот же самый пример выше, можно также указать значения аргументов по умолчанию, которые могут быть перезаписаны при желании.
@mixin btn($color: #fff, $color-hover: #9799a7) color: $color &:hover color: $color-hover .btn +btn($color-hover: #9799a7)
.btn < color: #fff; >.btn:hover
Переменные аргументы
Когда одно или несколько значений должны быть переданы в качестве аргумента, то имя переменной внутри примеси может заканчиваться многоточием (. ). В приведённом ниже примере с тенью мы можем передать в примесь значения, разделённые запятыми.
@mixin box-shadow($shadow. ) -webkit-box-shadow: $shadow -moz-box-shadow: $shadow box-shadow: $shadow .shadows +box-shadow(0 1px 2px #cecfd5, inset 0 0 5px #cecfd5)
.shadows
Импорт
Одной из самых приятных частей Sass является его способность импортировать несколько файлов .scss или .sass и сжимать их в один файл. Сжатие всех файлов в один позволяет использовать несколько таблиц стилей для лучшей организации, не беспокоясь о многочисленных HTTP-запросах.
Вместо того, чтобы ссылаться на все разные таблицы стилей внутри HTML-документа, ссылаемся только на один файл Sass, который импортирует все остальные таблицы стилей.
В следующих примерах все три файла normalize.sass, _grid.sass и typography.sass компилируются в один файл. В этом случае, если файл Sass с именем styles.sass импортирует все остальные файлы, и он компилируется в styles.css, то в HTML-документе следует ссылаться только на styles.css.
@import "normalize" @import "grid", "typography"
Циклы и условные выражения
Для более сложной стилизации Sass поддерживает различные директивы управления. Важно понимать, что эти директивы предназначены не для повседневного стиля, а для создания подробных примесей и помощников. Многие из них будут выглядеть знакомо, поскольку они заимствованы из других языков программирования.
Операторы
Некоторые циклы и условные выражения потребуют операторов для определения их поведения. Их можно разбить на операторы сравнения и операторы равенства. Операторы сравнения рассматривают отношения двух объектов, в то время как операторы равенства определяют равенство или различие между объектами.
// Операторы сравнения 6 < 10 // истина 4 2 // истина 10 >= 10 // истина // Операторы равенства #fff == white // истина 10 + 30 == 40 // истина normal != bold // истина
Функция if
Правило проверки выражения @if загружает стили под этим выражением, если оно возвращает что-то, кроме false или null . Начально выражение @if может быть дополнено несколькими выражениями @else if и одним @else . Как только выражение успешно определено, будут применены стили, непосредственно привязанные к нему.
$shay: awesome .shay @if $shay == awesome background: #ff7b29 @else if $shay == cool background: #0087cc @else background: #333
.shay
Цикл for
Правило @for выводит разные наборы стилей, основываясь на переменной счётчика. Есть две различные формы, доступные для циклов @for — to и through . Первый, к примеру, @for $i from 1 to 3 будет выводить стили до 3, не включая его. Другая форма, @for $i from 1 through 3 будет выводить стили до 3, включая его.
@for $col from 1 to 6 .col-# width: 40px * $col
.col-1 < width: 40px; >.col-2 < width: 80px; >.col-3 < width: 120px; >.col-4 < width: 160px; >.col-5
Цикл each
Достаточно просто, правило @each возвращает стили для каждого элемента в списке. Список может включать несколько элементов, разделённых запятыми.
@each $class in uxd, rails, html, css .#-logo background: url("/img/#.jpg")
.uxd-logo < background: url("/img/uxd.jpg"); >.rails-logo < background: url("/img/rails.jpg"); >.html-logo < background: url("/img/html.jpg"); >.css-logo < background: url("/img/css.jpg"); >
Цикл while
Правило @while постоянно возвращает стили, пока выражение не станет ложным. Эта директива принимает несколько различных операторов и переменная счётчика позволяет тонко контролировать точность цикла.
$heading: 1 @while $heading font-size: 2em - ($heading * .25em) $heading: $heading + 1
h1 < font-size: 1.75em; >h2 < font-size: 1.5em; >h3 < font-size: 1.25em; >h4 < font-size: 1em; >h5 < font-size: 0.75em; >h6
Другие препроцессоры
Haml и Sass не единственные доступные препроцессоры, включая также препроцессоры JavaScript. Вот некоторые другие популярные препроцессоры: Jade, Slim, LESS, Stylus и CoffeeScript.
Ради краткости Haml и Sass были единственными препроцессоры, рассмотренные в этом уроке. Они также были выбраны потому, что построены с использованием Ruby и прямо подходят к приложениям Ruby on Rails. Они также получили огромную поддержку сообщества.
Когда речь заходит о выборе, какой препроцессор использовать, важно рассмотреть вопрос о том, что лучше для вашей команды и проекта. Проекты, построенные в Node.js могут, вероятно, больше выиграть от Jade и Stylus. Самым важным аспектом для рассмотрения, однако, является то, что ваша команда привыкла использовать. Проведите исследование для каждого проекта и выберите наиболее обоснованное решение.
Ресурсы и ссылки
- Haml — HTML Abstraction Markup Language
- Sass — Syntactically Awesome Stylesheets
- Haml Documentation Reference
- Sass Documentation Reference
- Sass Playground на SassMeister
- SassScript Function на Sass Documentation
- HSLa Color Function Visualization на SassMe
Автор: Шэй Хоу
Последнее изменение: 20.02.2024
- Производительность и организация
- Подробнее о позиционировании
- Комплексные селекторы
- Отзывчивый веб-дизайн
- Препроцессоры
- jQuery
- Трансформация
- Переходы и анимация
- Поддержка функций и полифилы
- Продвинутая семантика и доступность
CSS-препроцессоры
Если рассматривать препроцессоры вместе с CSS, то получается картина более понятная, нежели чем рассматривать понятие препроцессора отдельно.
Определение
CSS препроцессор (от англ. CSS preprocessor) — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.
Основная задача препроцессора — это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, и тем самым, ускорить разработку и поддержу стилей в проектах.
CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код.
При помощи препроцессоров вы можете писать код, который нацелен на:
- Читабельность для человека
- Структурированность и логичность
- Производительность
И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.
Синтаксический сахар
Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».
Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.
Синтаксический сахар вводит в язык альтернативные варианты записи заложенных в этот язык конструкций. Под альтернативными вариантами записи стоит понимать более короткие или удобные конструкции для человека, которые в конечном итоге будут преобразовываться препроцессором в исходный язык, без синтаксического сахара.
Если попытаться применить это понятие к CSS-препроцессорам, то оно, в общем случае, полностью описывает их суть. Ещё раз напомню, что основной задачей препроцессоров является упрощение и ускорение разработки, а как это ещё можно сделать, если не ввести альтернативные варианты записи?
Какие бывают CSS-препроцессоры?
Пора перейти к более конкретным примерам, а именно к самим CSS-препроцессорам. На момент написания книги можно выделить три популярных препроцессора:
И несколько незначительных для нас игроков:
- Closure Stylesheets
- CSS Crush
О первой тройке мы поговорим отдельно немногим ниже, а вот о двух последних разговора вообще не будет, в виду их непопулярности. При желании, описания этих препроцессоров с лёгкостью можно найти в поисковике.
Какой смысл использования препроцессоров?
Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.
Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня. Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными.
CSS — это сложно
Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.
Доступная документация
Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.
Простота использования
Использовать препроцессоры стало проще, чем раньше, причём намного проще. Для этого нужно лишь установить программу, которая будет следить за файлами, предназначенными для препроцессора, и при их изменении будет компилировать содержимое этих файлов в чистый CSS-код.
Для более продвинутых пользователей есть специальные сборщики проектов. Не думайте, что если вы используете программу для препроцессоров, а не сборщик проектов, то вы недостаточно круты. На самом деле, такие сборщики предлагают полный контроль и расширенные настройки, а не делают из вас джедая.
Структура и логичность кода
Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:
1. Родительский селектор 1.1. Вложенный селектор 1.2. Вложенный селектор 1.2.1. Вложенный селектор 1.3. Вложенный селектор
Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.
Примеси
Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.
Модульность
Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.
При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.
Почему бы не подождать развития CSS?
Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.
В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.
Так что не стоит ждать в ближайшее время революций и изменений, способных затмить функционал и возможности CSS-препроцессоров.
Разновидности препроцессоров
Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:
Враждующими я их называю, потому что каждый приверженец одного из препроцессоров считает своим долгом поливать нечистотами представителей других, скажем так, конфессий. Такая неприязнь особенно часто проявляется у любителей препроцессора Sass, который считается старейшим и мощнейшим из всех трёх препроцессоров.
Для полной картины, я хочу привести краткую справку по каждому препроцессору:
Less
Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.
Sass (SCSS)
Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.
Имеет два синтаксиса:
- Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, который основан на идентации. Считается устаревшим.
- SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.
Stylus
Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют : , ; , <> и некоторые скобки).
results matching » «
No results matching » «