html препроцессоры что это такое

Что такое препроцессор 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 с помощью препроцессоров.

Источник

Препроцессоры CSS – незаменимый инструмент современного веб-разработчика

Дата публикации: 2017-04-02

От автора: о препроцессорах css говорят уже давно. Многие разработчики уже применяют их в разработке своих проектов. Есть и такие, кто слышал о препроцессорах или читал про них, но не понимает, какие преимущества дают препроцессоры при написании css кода.

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

Что это такое CSS препроцессоры?

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

То есть это не «революционная сверхтехнология». Это то, что расширяет возможности css. Это то, что может автоматизировать рутинные ежедневные операции и ускорить разработку.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как препроцессоры жизнь упрощают?

Препроцессоры позволяют ускорить написание css-кода и упрощают его поддержку в будущем.

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

Подобный пример встречается достаточно часто. И, как я отмечал в начале, преимуществ использования препроцессоров в этом примере не много. В любом редакторе кода мы можем нажать сочетание клавиш «ctrl»+”F”, найти код цвета «#ff0000» и заменить его на «#00ff00». И цвет поменяется с красного на зеленый во всех местах за один клик мыши.

Так в чем же реально нам могут помочь препроцессоры?

Какие проблемы решают препроцессоры?

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

Давайте посмотрим, как это все нам может помочь на реальных примерах:

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Эту проблему очень просто решают переменные в препроцессорах.

Кроме всего перечисленного при использовании препроцессоров вы полностью исключаете риск получить ошибку в css файле, получаете более чистый, логичный и кроссбраузерный css.

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

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

Давайте посмотрим, какие зарплаты предлагают веб-студии верстальщикам без знания препроцессоров на сайте hh.ru :

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

Как вы можете заметить максимальная оплата труда без знаний препроцессоров и минимальная оплата со знаниями препроцессоров, отличаются в 1,5 раза. А если посмотреть по средним цифрам, то оплата отличается минимум в 2 – 3 раза!

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

Вывод

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

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

P.S. Используете ли вы препроцессоры в разработке? Напишите в комментариях, какие препроцесслоры вы используете? Если пока не используете, то почему? Планируете ли начать использовать препроцессоры?

Видео презентация курса «Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки»

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Препроцессоры

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

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

Препроцессор — это программа, которая берёт один тип данных и преобразует его в другой тип данных. В случае HTML и CSS, одни из наиболее популярных языков препроцессора — это Haml и Sass. Haml преобразуется в HTML, а Sass преобразуется в CSS.

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

Haml (HTML abstraction markup language, абстрактный язык разметки HTML) — это язык разметки с единственной целью — предоставить возможность писать красивую разметку. Являясь собственным языком разметки, код, написанный на Haml, позже преобразуется в HTML. Haml продвигает принцип «не повторяйся» и способствует хорошо структурированной разметке, создавая приятный опыт для тех, кто умеет её писать и читать.

Установка

Haml требует Ruby для компиляции в HTML, поэтому первый шаг для его использования — убедитесь, что установлен Ruby. К счастью для тех, кто работает на Mac OS X, система поставляется с предустановленным Ruby, а те, кто работают на Windows, могут перейти к установщику напрямую. После установки Ruby выполните следующую команду, используя Terminal или программу командной строки.

Слежение за файлом или папкой

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

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

CodeKit также поддерживает другие препроцессоры, которые тоже могут вам пригодиться.

Доктайп

Первая часть при написании документа на Haml — это знание, какой тип доктайпа надо использовать. При работе с HTML-документами основным типом документа будет HTML5. В Haml типы документов определяются тремя восклицательными знаками (. ), затем идёт что-то конкретное при необходимости.

По умолчанию доктайп в Haml — это HTML 1.0 Transitional. Поэтому чтобы сделать его как HTML5, нужно передать цифру пять после восклицательных знаков (. 5).

Объявление элементов

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

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

Обработка текста

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

Атрибуты

Атрибуты, как и элементы, объявляются немного по-другому в Haml. Атрибуты объявляются непосредственно после элемента, в фигурных или круглых скобках, в зависимости от того, хотите вы использовать синтаксис Ruby или HTML. Атрибуты в стиле Ruby будут использовать стандартный синтаксис хэша внутри <>, в то время как атрибуты в стиле HTML будут использовать стандартный синтаксис HTML внутри ().

Классы и идентификаторы

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

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

Классы и идентификаторы в

В случае, если класс или идентификатор используется в

Логические атрибуты

Логические атрибуты обрабатываются так же, как если они были бы в Ruby или в HTML, в зависимости от используемого синтаксиса.

Экранирование текста

Одним из преимуществ Haml является возможность вычислять и запускать Ruby, однако это не всегда желаемое действие. Текст и строки кода можно экранировать с помощью обратной косой черты (\), что позволяет тексту отображаться в явном виде без выполнения.

В приведённом ниже примере, первый образец = @author выполняется Ruby, получая имя авторов из приложения. Второй образец начинается с обратной косой черты, экранирующей текст, и печатается как есть без выполнения.

Альтернативы экранирования текста

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

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

Комментарии

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

Условные комментарии

Условные комментарии также обрабатываются по другому в Haml. Чтобы создать условный комментарий используйте квадратные скобки ([]) вокруг условия. Эти квадратные скобки должны быть размещены непосредственно после косой черты.

Тихие комментарии

Haml также предоставляет возможность создавать особые тихие комментарии. Тихие комментарии отличаются от основных комментариев HTML тем, что после компиляции любое содержание внутри тихого комментария полностью удаляется с этой страницы и не отображается в результатах. Тихие комментарии начинаются с дефиса, затем идёт решётка (-#). Как и с другими комментариями, тихие комментарии могут быть использованы для удаления одной или нескольких строк с помощью вложенности.

Фильтры

Haml предлагает несколько фильтров, позволяющих использовать разные типы ввода внутри Haml. Фильтры начинаются с двоеточия, за которым идёт имя фильтра, к примеру, :markdown, со всем содержимым для фильтрации вложения под ним.

Распространённые фильтры

Ниже приведены некоторые распространённые фильтры, включая наиболее популярную группу :css и :javascript.

Фильтр Javascript

Фильтры CSS и Sass

Интерполяция Ruby

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

Ниже приведён пример на Ruby, который интерполируется как часть имени класса.

SCSS и Sass

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.

Команда выше принимает Sass-файл styles.sass и компилирует его в файл styles.css. Как и с Haml, эти имена файлов являются путями и должны быть указаны правильно. Приведённая выше команда работает, когда эти файлы находятся в папке, из которой выполняется команда. Если файлы находятся за пределами папки, то путь к ним должен быть явно указан в команде.

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

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

Конвертирование файлов из SCSS в Sass и наоборот

У вас есть возможность конвертировать файлы SCSS и Sass в CSS, но вы также можете конвертировать файлы из SCSS в Sass и наоборот. Чтобы это сделать, может быть использована команда sass, показанная ниже, для преобразования файла SCSS в Sass, а затем файла Sass в SCSS, соответственно.

Синтаксис

Как уже отмечалось ранее, основное отличие между SCSS и Sass в их синтаксисе и разница эта в деталях. Синтаксис SCSS не сильно отличается по сравнению с обычным CSS. На самом деле, стандарт CSS будет работать внутри SCSS. Sass, с другой стороны, является довольно строгим и любой отступ или ошибки символов запретят компиляцию стилей. Sass опускает все фигурные скобки (<>) и точки с запятой (;), опираясь на отступы и сплошная строка разбивается для форматирования.

SCSS против Sass

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

Лично я предпочитаю синтаксис Sass, поскольку он требует меньше символов и обеспечивает, как я считаю, более чистый синтаксис. Sass не допускает прямой ввод CSS как это делает SCSS и не станет мириться с какими-либо ошибками написания. У Sass чуть лучше кривая обучения, однако она, как я вижу, идёт за счёт лёгкости управления стилями.

Дальнейшие примеры в этом уроке будут использовать Sass, однако они также могут быть все выполнены и на SCSS.

Вложения

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

Вложенные свойства

Вложенные медиа-запросы

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

Родительский селектор

Родительский ключевой селектор

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

Комментарии

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

Переменные

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

Интерполяция переменных

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

Вычисления

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

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

Умножение выполняется с помощью символа звёздочки (*), однако только одно из чисел, если они указаны, может включать в себя единицу измерения. Использование знака процентов (%) возвращает остаток от деления двух чисел, и как с умножением, допускает только одно число, которое содержит единицу измерения.

Деление

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

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

Математика в деталях

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

Числовые функции

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

Функция percentage() превращает значение в проценты. Функция round() округляет значение до ближайшего целого числа, по умолчанию округляет вверх, где это необходимо. Функция ceil() округляет значение вверх до ближайшего целого числа, а функция floor() округляет значение вниз до ближайшего целого числа. И, наконец, функция abs() находит абсолютное значение заданного числа.

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

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

Операции с цветом

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

Операции с HSLa

Манипуляции с цветом

Кроме операций с цветом Sass также может манипулировать цветом напрямую. Такого рода манипуляции обеспечивает наибольший контроль над тонкой настройкой определённых свойств цвета. С этим контролем также повышается сложность, поэтому манипуляции с цветом делаются несколько реже, чем операции с цветом.

Расширения

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

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

Селектор-заполнитель

Расширение селектора элемента

Как и с классами, расширения также работают со стандартными селекторами элементов.

Примеси

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

Аргументы по умолчанию

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

Переменные аргументы

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

Импорт

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

В следующих примерах все три файла normalize.sass, _grid.sass и typography.sass компилируются в один файл. В этом случае, если файл Sass с именем styles.sass импортирует все остальные файлы, и он компилируется в styles.css, то в HTML-документе следует ссылаться только на styles.css.

Циклы и условные выражения

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

Операторы

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

Функция if

Цикл for

Цикл each

Достаточно просто, правило @each возвращает стили для каждого элемента в списке. Список может включать несколько элементов, разделённых запятыми.

Цикл while

Правило @while постоянно возвращает стили, пока выражение не станет ложным. Эта директива принимает несколько различных операторов и переменная счётчика позволяет тонко контролировать точность цикла.

Другие препроцессоры

Haml и Sass не единственные доступные препроцессоры, включая также препроцессоры JavaScript. Вот некоторые другие популярные препроцессоры: Jade, Slim, LESS, Stylus и CoffeeScript.

Ради краткости Haml и Sass были единственными препроцессоры, рассмотренные в этом уроке. Они также были выбраны потому, что построены с использованием Ruby и прямо подходят к приложениям Ruby on Rails. Они также получили огромную поддержку сообщества.

Источник