CSS може да бъде труден за управление, особено за всеки сайт с разумни размери. Получете помощ с този препроцесор.

Да приемем, че сте научили за наистина страхотна CSS функция, като влагане. Но когато продължите напред и го изпробвате, разбирате, че поддръжката е ужасна и ще минат години, преди най-накрая да можете да я използвате. Преди това беше огромен проблем в CSS до въвеждането на препроцесори като PostCSS.

Научете как PostCSS ви позволява да използвате модерен и бъдещ CSS днес по време на разработката. Ще разберете какво точно представлява PostCSS, как можете да го използвате и най-добрия начин да се възползвате от неговите функции.

Настройка на проекта

Отидете в празна папка, създайте файл с име index.html и добавете следното HTML маркиране във файла:

html>
<htmlезик="bg">
<глава>
<връзкаотн="стилов лист"href="src/styles.css">
глава>


<тяло>
<стр>Параграфстр>
<див>дивдив>
тяло>
html>

Този HTML документ изобразява абзац и елемент. Той също така импортира файл със стилов лист с име styles.css че е вътре в src папка. Създайте файла в src папка и включете следните правила за CSS стил:

instagram viewer 
тялостр {
цвят: оранжево;
}
тялодив {
цвят: син;
}
тяло {
дисплей: решетка;
}

Този CSS стилизира цвета на двата елемента на страницата и създава мрежово оформление. Повечето браузъри поддържат нормален CSS синтаксис като този. Но когато имате поглед върху по-нов синтаксис, ще трябва да въведете PostCSS.

Създаване на Node.js проект и инсталиране на PostCSS

С прости думи, PostCSS ви позволява да конвертирате модерен CSS в нещо, което повечето браузъри могат да разберат; процес, известен като транспилиране. Това е перфектно, ако искате да изпробвате нови, експериментални или нестандартни CSS свойства във вашия код, които основните браузъри може да не поддържат.

PostCSS също така предлага богата екосистема от плъгини за JavaScript, които можете да инсталирате, за да активирате определени функции, като минимизиране на CSS, поддръжка на цветове и поддръжка на linting.

За да използвате PostCSS, първото нещо, което трябва да направите, е да инициализирате нов Node.js проект:

npm init -y

Тази команда ще генерира файл package.json, който съдържа стойностите по подразбиране за вашето приложение.

След това инсталирайте PostCSS и PostCSS CLI. Вторият пакет ви позволява да стартирате PostCSS от командния ред:

npm i --save-dev postcss postcss-cli

The --save-dev флаг инсталира и двете npm пакети като dev зависимости; ще използвате само PostCSS и неговите добавки за обработка на CSS кода по време на разработката.

За да започнете да използвате PostCSS чрез интерфейс на командния ред, влезте във вашия package.json файл и създайте простия изграждане: css команда за транспилиране с PostCSS:

"скриптове": {
"изграждане: css": "postcss src/styles.css --dir dest -w"
}

Тази команда ще вземе вашия гол CSS (съхранен в src/styles.css), транспилирайте кода и след това го изведете в цел папка. Изпълнение на npm компилация: css командата създава тази папка и я попълва с styles.css файл, съдържащ четим от браузър код.

Когато импортирате вашия CSS в HTML, уверете се, че импортирате от целевата папка, в която компилирате вашия CSS, а не от папката източник, от която PostCSS компилира. Това в нашия случай е разст папка, а не src папка.

Ако отворите уебсайта си в браузър, ще видите, че сайтът все още има достъп до CSS. Всеки път, когато правите промени в изходния файл, PostCSS ще прекомпилира кода и промените ще се отразят на уеб страницата.

Използване на приставки за PostCSS

Има стотици PostCSS добавки за добавяне на префикси, линтинг, поддръжка на нов синтаксис и десетки други функции към PostCSS. След като инсталирате PostCSS плъгин, вие го активирате вътре в postcss.config.js файл — JavaScript файл, който можете да използвате, за да настроите всички конфигурации за PostCSS.

Инсталирайте cssnano PostCSS плъгин със следната команда:

npm i --save-dev cssnano

Още веднъж, трябва само да запазите тези зависимости като зависимости за разработчици. Причината е, че всичко това се случва, докато се развивате. Нямате нужда от PostCSS или който и да е от неговите приставки, след като стартирате сайта в производство.

За да използвате новоинсталирания плъгин cssnano, трябва да добавите следния код вътре в postcss.config.js файл:

конст cssnano = изискват("cssnano")
модул.exports = {
 добавки: [
 cssnano({
 предварително зададено: "по подразбиране"
 })
 ]
}

Сега, ако се върнете към терминала и изпълните отново командата за изграждане, това ще минимизира изходния CSS (т.е. ще направи кода възможно най-малък). Така че, когато натискате към готов за производство сайт, това ще направи вашия CSS възможно най-малък.

Използване на модерни функции като Nesting

Да предположим, че искате да използвате синтаксиса за влагане във вашия лист със стилове, така че заменяте блока с абзац src/styles.css с тази:

тяло {
 & стр {
цвят: оранжево;
 }
}

Този код е същият като версията във вашия стартов код. Но това ще доведе до грешка, защото синтаксисът е много нов и повечето уеб браузъри не го поддържат. Можете да активирате поддръжка за този синтаксис с PostCSS, като инсталирате postcss-preset-env плъгин.

Плъгинът компилира куп различни плъгини за обработка на CSS въз основа на това на какъв етап е. Етап 0 представлява супер експерименталните функции, които може дори да не влязат в CSS. Докато етап 4 е за езикови функции, които вече са част от CSS спецификацията.

По подразбиране, настояще-ок използва функции от етап 2 (които е най-вероятно да влязат в CSS). Но можете да промените сцената на каквото искате в конфигурационния файл.

За да инсталирате плъгина, изпълнете следната команда:

npm i --save-dev postcss-preset-env

След това във вашия postcss.config.js файл, трябва да импортирате приставката и да я регистрирате:

конст cssnano = изискват("cssnano")
конст postcssPresetEnv = изискват("postcss-preset-env")
модул.exports = {
 добавки: [
 cssnano({
 предварително зададено: "по подразбиране"
 }),
 postcssPresetEnv({ сцена: 1})
 ]
}

Трябва да преминете само етапа на новия CSS код, който възнамерявате да използвате. В този случай приемаме, че функцията за влагане е на етап 1. Когато изпълните отново командата за изграждане и проверите браузъра, ще видите, че той е компилирал вложения код в стандартен CSS, който браузърът може да разбере.

Използване на PostCSS с Frameworks

Ръчното конфигуриране на PostCSS може да бъде малко мъчно. Ето защо почти всички съвременни рамки идват с инструменти за групиране (напр. Vite, Snowpack и Parcel) и тези инструменти ще имат вградена поддръжка за PostCSS. И дори да не го направят, процесът на добавяне на поддръжка на PostCSS е невероятно лесен.

Винаги помнете, че Vite и повечето други пакети използват Модулна система ES6, а не CommonJS. За да заобиколите това, трябва да използвате импортиране изявление на мястото на изисквам() във вашия postcssconfig.js файл:

импортиране cssnano от"cssnano"
// Конфигурационният код отива тук

Докато имате инсталирани добавки, всичко ще работи добре.

Научете повече за SaSS

PostCSS е само един от десетките CSS препроцесори, налични в момента. Един от тях е SaSS, което означава синтактично страхотни стилови таблици.

Да се ​​научите да използвате друг основен препроцесор може да бъде полезно като CSS разработчик.