PostCSS — разлика између измена
Садржај обрисан Садржај додат
мНема описа измене |
Додавање параграфа Начин функционисања. |
||
Ред 25:
'''PostCSS''' је софтверски развојни алат за аутоматизацију рутинских [[CSS]] операција коришћењем [[Јаваскрипт]] [[Прикључак (рачунарство)|плагинова]].<ref>[http://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535 Први чланак о PostCSS-у на Tuts+ курсу]</ref> Овај алат је коришћен у развоју кода на [[Википедија|Википедији]],<ref name="postcss-wiki">[https://github.com/wikimedia/portals/commit/998d7ce74c1f68397a52434ce9b85064de7d0008 Додавање PostCSS комита на Википедија репозиторијум]</ref><ref name="stylelint-wiki">[https://github.com/wikimedia/stylelint-config-wikimedia Викимедија Стајлинт конфигурација]</ref> [[Фејсбук]]у<ref name="stylelint-fb">[https://code.facebook.com/posts/879890885467584/improving-css-quality-at-facebook-and-beyond/ Побољшање квалитета CSS-а у компанији Фејсбук и другим]</ref> и [[GitHub|ГитХаб-у]].<ref>[https://archive.is/20160823060733/https://github.com/primer/primer/blob/master/.postcss.json PostCSS подешавања ГитХаб алата за билдовање]</ref><ref name="stylelint-gh">[https://github.com/primer/stylelint-config-primer Пример Стајлинт конфигурације]</ref> PostCSS је један од најпопуларнијих алата међу [[npm (софтвер)|npm]] корисницима. Развио га је [[Андреј Сатник]] на основу свог рада на пројекту Зли Марсовци ({{јез-енгл|Evil Martians}}).<ref>[https://github.com/postcss/postcss/commit/513f9c1b46a7085ac215e4de9bac5c617d5b2f26 Evil Martians комит у PostCSS репозиторијуму]</ref>
== Начин функционисања ==
== Структура ==
За разлику од [[Sass (стилски језик)|Sass-a]] и [[LESS]]-a, PostCSS није шаблонски језик за компајлирање CSS-а, већ [[Програмски оквир|фрејмворк]] за развој CSS алата,<ref name="why-postcss">[https://github.com/postcss/postcss/issues/861 Шта је PostCSS - дискусија]</ref> иако се може користити за развој шаблонских језика као што су Sass и Less.<ref>[http://webdesign.tutsplus.com/tutorials/postcss-deep-dive-preprocessing-with-precss--cms-24583 PostCSS детаљно: Препроцесирање помоћу “PreCSS”-а]</ref>
PostCSS се састоји од следећих компоненти:<ref name="cssconfus">[https://www.youtube.com/watch?v=1yUFTrAxTzg Андреј Ситник - PostCSS: Будућност након Sass-а и LESS-а]</ref>
*'''CSS [[Raščlanjivanje|парсер]]''' који генерише АСТ објектно стабло ѕа сваку линију CSS кода;
*'''Скуп [[Објектно-оријентисано програмирање|класа]]''' које чине стабло;
*'''CSS генератор''' који генерише линију CSS кода за објектно стаблоч
*'''Генератор мапа кода''' за бележење промена у CSS-у.
Све ове корисне функционалности су доступне у виду плагинова. Плагинови су мањи програми који манипулишу објектним стаблом. Након трансформације CSS знаковног низа у објектно стабло, плагинови редом аналиѕирају и мењају стабло. Након тога језгро PostCSS-a генерише нови CSS знаковни низ за стабло.
=== Коришћење ===
PostCSS и плагинови су написани у [[Јаваскрипт]]у и дистрибуирани путем [[npm (софтвер)|npm]]-a.
PostCSS нуди [[Апликациони програмски интерфејс|АПИ]] ѕа основне операције са ЈаваСкриптом:
<source lang="js">
// Учитавање језгра и плагинова са npm-а
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')
// Плагинови који се користе
const processor = postcss([autoprefixer, precss])
// CSS код и називи фајлова за унос/уписивање
processor.process('a {}', { from: './app.css', to: './app.build.css' })
// Коришћење Promise API у случају постојања асинхроних плагинова
.then(result => {
// Приказивање пост-процесираног CSS кода
console.log(result.css)
// Приказивање поруке упозорења
for ( let message of result.warnings() ) {
console.warn(message.toString())
}
})
</source>
За интеграцију PostCSS-a и система за билдовање (као што су [[Webpack|Вебпак]],<ref>[https://github.com/postcss/postcss-loader postcss-loader]</ref> [[Gulp.js|Галп]]<ref>[https://github.com/postcss/gulp-postcss gulp-postcss]</ref> и [[Grunt|Грант]]<ref>[https://github.com/nDmitry/grunt-postcss grunt-postcss]</ref>) раѕвијени су званични алати, као и конзола која се може преуѕети.<ref>[https://github.com/postcss/postcss-cli postcss-cli] [[Browserify]] или [[Webpack]] омогућавају коришћење PostCSS-a у веб прегледачима.<ref>[https://github.com/postcss/postcss/issues/830 Коришћење PostCSS-а у веб прегледачу]</ref>
== Референце ==
| |||