Препроцессоры css что это

@mixin button-base() @include typography(button) @include ripple-surface @include ripple-radius-bounded display: inline-flex position: relative height: $button-height border: none vertical-align: middle &:hover cursor: pointer &:disabled color: $mdc-button-disabled-ink-color cursor: default pointer-events: none 

@mixin button-base() < @include typography(button); @include ripple-surface; @include ripple-radius-bounded; display: inline-flex; position: relative; height: $button-height; border: none; vertical-align: middle; &:hover < cursor: pointer; >&:disabled < color: $mdc-button-disabled-ink-color; cursor: default; pointer-events: none; >> 

.banner

font-size = 14px font-stack = "Lucida Grande", Arial, sans-serif body font font-size font-stack //Компилируется в CSS: body

textarea, input border 1px solid #eee 

$font-size = 14px body

gem install haml

haml index.haml index.html

%body %header %h1 Привет, мир! %section %p Lorem ipsum dolor sit amet.

  
Привет, мир!
 
 
Lorem ipsum dolor sit amet.
 
 

%body %header %h1 Привет, мир! %section %p Lorem ipsum dolor sit amet.

%img "shay.jpg", :alt => "Шэй Хоу"> %img %img(src="https://webref.ru/layout/advanced-html-css/shay.jpg" alt="Шэй Хоу")

%section.feature %section.feature.special %section#hello %section#hello.feature(role="region")

.awesome .awesome.lesson #getting-started.lesson

%input "checkbox", :checked => true> %input(type="checkbox" checked=true) %input(type="checkbox" checked)

.author = @author \= @author

%p Шэй — = succeed "." do %a "#"> молодец

%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 стали частью инструментария каждого разработчика, позволяя создавать более поддерживаемый и эффективный код. В этой статье мы рассмотрим, что такое препроцессоры и постпроцессоры, какие преимущества они предоставляют, и как они содействуют более качественной разработке веб-проектов.

Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!

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

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

1. Переменные и миксины: препроцессоры позволяют использовать переменные для значений, которые могут повторяться в различных частях. Миксины позволяют создавать повторяющиеся структуры стилей.
2. Вложенность: CSS код может быть вложен в структурах, а это делает программу более читаемым и структурированным.
3. Функции: препроцессоры включают в себя встроенные функции, такие как математические операции и обработка строк, что упрощает создание сложных стилей.
4. Импорт: возможность разделить программу на отдельные файлы и импортировать их в основной позволяет создавать более модульные и поддерживаемые стили.

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

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

1. Минификация: постпроцессоры удаляют лишние пробелы, комментарии и переносы строк, сокращая размер файла и ускоряя загрузку страницы.
2. Автопрефиксеры: эти инструменты добавляют автоматические вендорные префиксы к CSS свойствам, обеспечивая совместимость стилей с разными браузерами.
3. Анализ и оптимизация: постпроцессоры могут анализировать структуру и предоставлять рекомендации по его оптимизации, такие как объединение повторяющихся стилей.

Пример: PostCSS

Одним из популярных инструментов для постпроцессинга CSS является PostCSS. Это инструмент с открытым исходным кодом, который предоставляет плагины для различных задач оптимизации и улучшения стилей.

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

Немного кода

Давайте рассмотрим пример использования препроцессора (Sass) для написания стилей и постпроцессора (PostCSS) для их оптимизации.