Разработка сайтов в Николаевке, ДНР. Как использовать PostCSS в качестве настраиваемой альтернативы Sass

Веб-разработчики любят препроцессор Sass CSS. Согласно мнению Sass в State of CSS Survey, каждый разработчик знает, что это такое, 89% используют его регулярно, а 88% очень довольны.

Многие веб-сборщики включают обработку Sass, но вы также можете использовать PostCSS, не осознавая этого. PostCSS прежде всего известен своим плагином Autoprefixer, который автоматически добавляет префиксы -webkit, -mozи -msпоставщиков к свойствам CSS, когда это необходимо. Его система плагинов означает, что он может делать гораздо больше... например, компилировать.scssфайлы без использования компилятора Sass.

В этом руководстве объясняется, как создать собственный препроцессор CSS, который компилирует синтаксис Sass и дополняет его дополнительными функциями. Он идеально подходит для тех, у кого есть особые требования к CSS и кто немного знаком с Node.js.

Быстрый старт

Пример проекта PostCSS можно клонировать с GitHub. Для этого требуется Node.js, поэтому запустите, npm installчтобы получить все зависимости.

src/scss/main.scssСкомпилируйте исходный код демонстрации, build/css/main.cssиспользуя:

npm run css: dev

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

npm run css: watch

Затем выйдите из просмотра, нажав Ctrl| Cmd+ Cв терминале.

Оба варианта также создают исходную карту по адресу build/css/main.css.map, которая ссылается на исходные файлы в инструментах разработчика.

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

npm run css: build

Обратитесь к README.mdфайлу для получения дополнительной информации.

Стоит ли заменять Sass на PostCSS?

В компиляторе Sass нет ничего плохого, но учтите следующие факторы.

Зависимости модуля

Последнюю версию Dart Sass можно установить глобально с помощью npmменеджера пакетов Node.js:

npm install -g sass

Скомпилируйте.scssкод Sass с помощью:

sass [input.scss] [output.css]

Исходные карты генерируются автоматически (—no-source-mapотключит их) или —watchмогут быть добавлены к автокомпилируемым исходным файлам при их изменении.

Последняя версия Sass требует менее 5 МБ места для установки.

PostCSS должен требовать меньше ресурсов и базового Sass-подобного компилятора с автоматическим префиксом, а для минификации требуется менее 1 МБ места. На самом деле ваша node_modulesпапка увеличится до более чем 60 МБ и будет быстро увеличиваться по мере добавления дополнительных плагинов. В основном это npmустановка других зависимостей. Даже если PostCSS не использует их, его нельзя рассматривать как облегченную альтернативу.

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

Скорость обработки

Медленный компилятор Sass на основе Ruby давно ушел в прошлое, и в последней версии используется скомпилированная среда выполнения Dart. Это быстро.

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

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

Настройка

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

Вы не можете легко добавлять новые функции.

Возможно, вы хотели бы преобразовать цвета HSLA в RGB. Можно написать пользовательскую функцию, но другие требования будут невыполнимы — например, встраивание SVG в качестве фонового изображения.

Вы не можете легко ограничить набор функций.

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

PostCSS значительно более настраиваемый.

Сам по себе PostCSS ничего не делает. Для работы функций обработки требуется один или несколько из множества доступных подключаемых модулей. Большинство из них выполняют одну задачу, поэтому, если вам не нужна вложенность, не добавляйте плагин для вложенности. При необходимости вы можете написать свои собственные плагины в стандартном модуле JavaScript, которые могут использовать возможности Node.js.

Установить PostCSS

PostCSS можно использовать с webpack, Parcel, Gulp.js и другими инструментами сборки, но в этом руководстве показано, как запустить его из командной строки.

При необходимости инициализируйте новый проект Node.js с помощью npm init. Настройте PostCSS, установив следующие модули для базового.scssсинтаксического анализа с плагинами для партиалов, переменных, примесей, вложенности и автоматического префикса:

npm install —save-devpostcss-clipostcss-scsspostcss-advanced-variablespostcss-nested autoprefixer

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

Примечание. PostCSS можно запустить только из файла JavaScript, но postcss-cliмодуль предоставляет оболочку, которую можно вызвать из командной строки. Модуль postcss-scss позволяет PostCSS читать.scssфайлы, но не преобразовывать их.

Конфигурация автопрефиксера

Autoprefixer использует список браузеров, чтобы определить, какие префиксы поставщиков требуются в соответствии с вашим списком поддерживаемых браузеров. Проще всего определить этот список как «browserslist»массив в формате package.json. В следующем примере добавляются префиксы поставщиков, где доля любого браузера на рынке составляет не менее 2%:

«browserslist»: [

«> 2%»

],

Ваша первая сборка

Обычно у вас будет один корневой.scssфайл Sass, который импортирует все необходимые частичные/компонентные файлы. Например:

// root Sass file

// src/scss/main.scss

@import '_variables’;

@import '_reset’;

@import 'components/_card’;

// etc.

Компиляцию можно запустить, запустив npx postcss, а затем входной файл, —outputфайл и любые необходимые параметры. Например:

npx postcss. /src/scss/main.scss \

—output. /build/css/main.css \

—env development \

—map \

—verbose \

—parser postcss-scss \

—use postcss-advanced-variablespostcss-nested autoprefixer

Эта команда:

анализирует. /src/scss/main.scss

выходы на. /build/css/main.css

устанавливает NODE_ENVпеременную среды вdevelopment

выводит внешний исходный файл карты

устанавливает подробный вывод и сообщения об ошибках

устанавливает postcss-scssпарсер Sass и

использует плагины postcss-advanced-variables, postcss-nestedи autoprefixerдля обработки партиалов, переменных, примесей, вложенности и автоматического префикса

При желании вы можете добавить —watchавтокомпиляцию при.scssизменении файлов.

Создайте файл конфигурации PostCSS

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

Файлы конфигурации PostCSS — это файлы модулей JavaScript с именами postcss.config.jsи обычно хранящиеся в корневом каталоге проекта (или в любом другом каталоге, из которого вы запускаете PostCSS). Модуль должен exportвыполнять одну функцию:

// postcss.config.js

module.exports = cfg => {

//... configuration...

};

Ему передается cfgобъект со свойствами, заданными postcssкомандой. Например:

{

cwd: '/home/name/postcss-demo’,

env: 'development’,

options: {

map: undefined,

parser: undefined,

syntax: undefined,

stringifier: undefined

},

file: {

dirname: '/home/name/postcss-demo/src/scss’,

basename: 'main.scss’,

extname: '.scss’

}

}

Вы можете изучить эти свойства и отреагировать соответствующим образом — например, определить, работаете ли вы в developmentрежиме и обрабатываете ли.scssвходной файл:

// postcss.config.js

module.exports = cfg => {

const

dev = cfg.env === 'development’,

scss = cfg.file.extname === '.scss’;

//... configuration...

};

Функция должна возвращать объект с именами свойств, соответствующими параметрам postcss-cliкомандной строки. Следующий файл конфигурации повторяет длинную команду быстрого запуска, использованную выше:

// postcss.config.js

module.exports = cfg => {

const

dev = cfg.env === 'development’,

scss = cfg.file.extname === '.scss’;

return {

map: dev? { inline: false }: false,

parser: scss? 'postcss-scss’: false,

plugins: [

require ('postcss-advanced-variables’) (),

require ('postcss-nested’) (),

require ('autoprefixer’) ()

]

};

};

Теперь PostCSS можно запустить с помощью более короткой команды:

npx postcss. /src/scss/main.scss \

—output. /build/css/main.css \

—env development \

—verbose

Вот некоторые вещи, на которые следует обратить внимание:

—verboseявляется необязательным: он не установлен в postcss.config.js.

Синтаксический анализ Sass применяется только в том случае, если входными данными является.scssфайл. В противном случае по умолчанию используется стандартный CSS.

Исходная карта выводится, только если —envустановлено значение development.

—watchеще можно добавить для автокомпиляции.

Если вы предпочитаете postcss.config.jsнаходиться в другом каталоге, на него можно сослаться с помощью —configопции, например —config /mycfg/. В примере проекта указанная выше конфигурация находится в config/postcss.config.js. На него ссылается run npm run css: basic, который вызывает:

npx postcss src/scss/main.scss \

—output build/css/main.css \

—env development \

—verbose \

—config. /config/

Добавление дополнительных плагинов

В следующих разделах приведены примеры подключаемых модулей PostCSS, которые либо анализируют дополнительный.scssсинтаксис, либо обеспечивают обработку, выходящую за рамки компилятора Sass.

Используйте токены дизайна

Маркеры дизайна — это независимый от технологии способ хранения переменных, таких как общекорпоративные шрифты, цвета, интервалы и т. д. Вы можете хранить пары «имя-значение» токена в файле JSON:

{

«font-size»: «16px»,

«font-main»: «Roboto, Oxygen-Sans, Ubuntu, sans-serif»,

«lineheight»: 1.5,

«font-code»: «Menlo, Consolas, Monaco, monospace»,

«lineheight-code»: 1.2,

«color-back»: «#f5f5f5»,

«color-fore»: «#444»

}

Затем ссылайтесь на них в любом веб-приложении, Windows, macOS, iOS, Linux, Android или другом приложении.

Маркеры дизайна не поддерживаются Sass напрямую, но объект JavaScript со variablesсвойством, содержащим пары имя-значение, может быть передан существующему плагину PostCSS-advanced-variables:

// PostCSS configuration

module.exports = cfg => {

// import tokens as Sass variables

const variables = require ('. /tokens.json’) ; // NEW

const

dev = cfg.env === 'development’,

scss = cfg.file.extname === '.scss’;

return {

map: dev? { inline: false }: false,

parser: scss? 'postcss-scss’: false,

plugins: [

require ('postcss-advanced-variables’) ({ variables }), // UPDATED

require ('postcss-nested’) (),

require ('autoprefixer’) ()

]

};

};

Плагин преобразует все значения в глобальный Sass $variables, который можно использовать в любом партиале. Можно задать резервное значение, чтобы переменная была доступна, даже если она отсутствует в файлах tokens.json. Например:

// set default background color to #FFF

// if no «color-back» value is set in tokens.json

$color-back: #fff! default;

После этого на переменные токена можно ссылаться в любом.scssфайле. Например:

body {

font-family: $font-main;

font-size: $font-size;

line-height: $lineheight;

color: $color-fore;

background-color: $color-back;

}

В примере проекта определен token.jsonфайл, который загружается и используется при запуске npm run css: dev.

Добавить поддержку карт Sass

Карты Sass — это объекты типа «ключ-значение». Функция map-getможет искать значения по имени.

В следующем примере точки останова медиазапроса определяются как карта Sass с respondмиксином для извлечения именованного значения:

// media query breakpoints

$breakpoint: (

'small’: 36rem,

'medium’: 50rem,

'large’: 64rem

) ;

/*

responsive breakpoint mixin:

@include respond ('medium’) {... }

*/

@mixin respond ($bp) {

@media (min-width: map-get ($breakpoint, $bp)) {

@content;

}

}

Затем в том же селекторе можно определить свойства по умолчанию и модификации медиазапроса. Например:

main {

width: 100%;

@include respond ('medium’) {

width: 40em;

}

}

Что компилируется в CSS:

main {

width: 100%;

}

@media (min-width: 50rem) {

main {

width: 40em

}

}

Плагин postcss-map-get добавляет обработку карт Sass. Установите его с помощью:

npm install —save-devpostcss-map-get

И обновите postcss.config.jsфайл конфигурации:

// PostCSS configuration

module.exports = cfg => {

// import tokens as Sass variables

const variables = require ('. /tokens.json’) ;

const

dev = cfg.env === 'development’,

scss = cfg.file.extname === '.scss’;

return {

map: dev? { inline: false }: false,

parser: scss? 'postcss-scss’: false,

plugins: [

require ('postcss-advanced-variables’) ({ variables }),

require ('postcss-map-get’) (), // NEW

require ('postcss-nested’) (),

require ('autoprefixer’) ()

]

};

};

Добавить оптимизацию медиазапросов

Поскольку мы добавили медиа-запросы, было бы полезно объединить и отсортировать их в порядке мобильных устройств. Например, следующий CSS:

@media (min-width: 50rem) {

main {

width: 40em;

}

}

@media (min-width: 50rem) {

#menu {

width: 30em;

}

}

могут быть объединены, чтобы стать:

@media (min-width: 50rem) {

main {

width: 40em;

}

#menu {

width: 30em;

}

}

Это невозможно в Sass, но может быть достигнуто с помощью плагина postcss-sort-media-queries для PostCSS. Установите его с помощью:

npm install —save-devpostcss-sort-media-queries

Затем добавьте его в postcss.config.js:

// PostCSS configuration

module.exports = cfg => {

// import tokens as Sass variables

const variables = require ('. /tokens.json’) ;

const

dev = cfg.env === 'development’,

scss = cfg.file.extname === '.scss’;

return {

map: dev? { inline: false }: false,

parser: scss? 'postcss-scss’: false,

plugins: [

require ('postcss-advanced-variables’) ({ variables }),

require ('postcss-map-get’) (),

require ('postcss-nested’) (),

require ('postcss-sort-media-queries’) (), // NEW

require ('autoprefixer’) ()

]

};

};

Добавить обработку активов

Управление активами недоступно в Sass, но postcss-assets упрощает его. Плагин разрешает URL-адреса изображений CSS, добавляет очистку кеша, определяет размеры изображения и встраивает файлы с использованием нотации base64. Например:

#mybackground {

background-image: resolve ('back.png’) ;

width: width ('back.png’) ;

height: height ('back.png’) ;

background-size: size ('back.png’) ;

}

компилируется в:

#mybackground {

background-image: url ('/images/back.png’) ;

width: 600px;

height: 400px;

background-size: 600px 400px;

}

Установите плагин с помощью:

npm install —save-devpostcss-assets

Затем добавьте его в postcss.config.js. В этом случае плагин получает указание найти изображения в src/images/каталоге:

// PostCSS configuration

module.exports = cfg => {

// import tokens as Sass variables

const variables = require ('. /tokens.json’) ;

const

dev = cfg.env === 'development’,

scss = cfg.file.extname === '.scss’;

return {

map: dev? { inline: false }: false,

parser: scss? 'postcss-scss’: false,

plugins: [

require ('postcss-advanced-variables’) ({ variables }),

require ('postcss-map-get’) (),

require ('postcss-nested’) (),

require ('postcss-sort-media-queries’) (),

require ('postcss-assets’) ({ // NEW

loadPaths: ['src/images/']

}),

require ('autoprefixer’) ()

]

};

};

Добавить минификацию

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

Установите cssnano с помощью:

npm install —save-dev cssnano

Затем добавьте его в postcss.config.js. В этом случае минимизация происходит только тогда, когда NODE_ENVустановлено что-либо, кроме development:

// PostCSS configuration

module.exports = cfg => {

// import tokens as Sass variables

const variables = require ('. /tokens.json’) ;

const

dev = cfg.env === 'development’,

scss = cfg.file.extname === '.scss’;

return {

map: dev? { inline: false }: false,

parser: scss? 'postcss-scss’: false,

plugins: [

require ('postcss-advanced-variables’) ({ variables }),

require ('postcss-map-get’) (),

require ('postcss-nested’) (),

require ('postcss-sort-media-queries’) (),

require ('postcss-assets’) ({

loadPaths: ['src/images/']

}),

require ('autoprefixer’) (),

dev? null: require ('cssnano’) () // NEW

]

};

};

Установка запускает минимизацию (и удаляет исходную карту) —env: prodution

npx postcss. /src/scss/main.scss \

—output. /build/css/main.css \

—env prodution \

—verbose

В примере проекта рабочий CSS можно скомпилировать, запустив npm run css: build.

Перейти к PostCSS?

PostCSS — это мощный и настраиваемый инструмент, который может компилировать.scssфайлы и улучшать (или ограничивать) стандартный язык Sass. Если вы уже используете PostCSS для Autoprefixer, вы можете полностью удалить компилятор Sass, сохранив при этом любимый синтаксис.