ЦСС може бити тешко управљати, посебно за било коју веб локацију разумне величине. Помозите нам са овим предпроцесором.

Рецимо да сте научили о заиста сјајној ЦСС функцији, као што је угнежђење. Али када наставите и испробате, схватите да је подршка ужасна и да ће проћи године пре него што је коначно можете искористити. Ово је некада био велики проблем у ЦСС-у све до увођења претпроцесора као што је ПостЦСС.

Сазнајте како вам ПостЦСС омогућава да користите савремени и будући ЦСС данас током развоја. Сазнаћете шта је тачно ПостЦСС, како можете да га користите и најбољи начин да искористите његове карактеристике.

Постављање пројекта

Идите у празан фолдер, креирајте датотеку под називом индек.хтмл и додајте следеће ХТМЛ ознаке у датотеку:

хтмл>
<хтмлланг="ен">
<глава>
<линкрел="стилесхеет"хреф="срц/стилес.цсс">
глава>


<тело>
<стр>Параграфстр>
<див>Дивдив>
тело>
хтмл>

Овај ХТМЛ документ приказује пасус и елемент. Такође увози датотеку са стилским листама под називом стилес.цсс то је унутар срц фолдер. Креирајте датотеку у срц фолдер и укључите следећа правила ЦСС стила:

телостр {
боја: наранџаста;
}
телодив {
боја: Плави;
}
тело {
приказ: грид;
}

Овај ЦСС стилизује боју оба елемента на страници и креира распоред мреже. Већина претраживача подржава нормалну ЦСС синтаксу попут ове. Али када имате поглед на новију синтаксу, мораћете да унесете ПостЦСС.

Креирање Ноде.јс пројекта и инсталирање ПостЦСС-а

Једноставно речено, ПостЦСС вам омогућава да конвертујете савремени ЦСС у нешто што већина претраживача може да разуме; процес који је уобичајено познат као транспилација. Ово је савршено ако желите да испробате нова, експериментална или нестандардна својства ЦСС-а у свом коду које главни прегледачи можда не подржавају.

ПостЦСС такође нуди богат екосистем ЈаваСцрипт додатака које можете да инсталирате да бисте омогућили одређене функције, као што су ЦСС минификација, подршка за боје и подршка за линтинг.

Да бисте користили ПостЦСС, прва ствар коју треба да урадите је да иницијализујете нови Ноде.јс пројекат:

нпм инит -и

Ова команда ће генерисати датотеку пацкаге.јсон која садржи подразумеване вредности за вашу апликацију.

Затим инсталирајте и ПостЦСС и ПостЦСС ЦЛИ. Други пакет вам омогућава да покренете ПостЦСС из командне линије:

нпм и --саве-дев постцсс постцсс-цли

Тхе --саве-дев флаг инсталира оба нпм пакети као дев зависности; користићете само ПостЦСС и његове додатке за обраду ЦСС кода током развоја.

Да бисте почели да користите ПостЦСС преко интерфејс командне линије, идите у свој пацкаге.јсон датотеку и креирајте једноставне буилд: цсс команда за транспилацију са ПостЦСС:

"скрипте": {
"буилд: цсс": "постцсс срц/стилес.цсс --дир дест -в"
}

Ова команда ће узети ваш голи ЦСС (сачуван у срц/стилес.цсс), транспилирајте код, а затим га испишите у дест фолдер. Руннинг тхе нпм буилд: цсс команда креира овај фолдер и попуњава га са стилес.цсс датотека која садржи код читљив у претраживачу.

Када увозите свој ЦСС у ХТМЛ, уверите се да увозите из одредишне фасцикле у којој компајлирате свој ЦСС, а не из изворне фасцикле из које се компајлира ПостЦСС. Ово је, у нашем случају дист фолдер, а не срц фолдер.

Ако отворите своју веб локацију у прегледачу, видећете да сајт и даље приступа ЦСС-у. Сваки пут када унесете измене у изворну датотеку, ПостЦСС ће поново компајлирати код и промене ће се одразити на веб страници.

Коришћење ПостЦСС додатака

Има их на стотине ПостЦСС додаци за додавање префикса, линтинга, подршке за нову синтаксу и десетине других функција у ПостЦСС. Након што инсталирате ПостЦСС додатак, активирате га унутар постцсс.цонфиг.јс датотека — ЈаваСцрипт датотека коју можете користити за подешавање свих конфигурација за ПостЦСС.

Инсталирајте цсснано ПостЦСС додатак са следећом командом:

нпм и --саве-дев цсснано

Још једном, потребно је само да сачувате ове зависности као дев зависности. Разлог је што се све ово дешава док се развијате. Није вам потребан ПостЦСС или било који од његових додатака након што поставите сајт у производњу.

Да бисте користили новоинсталирани додатак цсснано, морате додати следећи код унутар постцсс.цонфиг.јс фајл:

конст цсснано = захтевају("цсснано")
модул.екпортс = {
 додаци: [
 цсснано({
 унапред подешено: 'подразумевано'
 })
 ]
}

Сада, ако се вратите на терминал и поново покренете команду изградње, ово ће умањити излазни ЦСС (тј. учинити код што је могуће мањим). Дакле, када дођете до сајта спремног за производњу, ваш ЦСС ће бити што мањи.

Коришћење модерних функција попут угнежђења

Претпоставимо да желите да користите синтаксу угнежђења у вашој табели стилова, тако да замените блок пасуса срц/стилес.цсс са овим:

тело {
 & стр {
боја: наранџаста;
 }
}

Овај код је исти као верзија у вашем почетном коду. Али ово ће изазвати грешку јер је синтакса веома нова и већина веб прегледача је не подржава. Можете омогућити подршку за ову синтаксу са ПостЦСС-ом тако што ћете инсталирати постцсс-пресет-енв повезати.

Додатак саставља гомилу различитих додатака за руковање ЦСС-ом на основу тога у којој се фази налази. Фаза 0 представља супер експерименталне карактеристике које можда неће ни ући у ЦСС. Док је фаза 4 за језичке карактеристике које су већ део ЦСС спецификације.

Подразумевано, пресент-енв користи функције фазе 2 (које ће највероватније ући у ЦСС). Али можете променити фазу на шта год желите у конфигурационој датотеци.

Да бисте инсталирали додатак, покрените следећу команду:

нпм и --саве-дев постцсс-пресет-енв

Затим у вашем постцсс.цонфиг.јс датотеку, потребно је да увезете додатак и региструјете га:

конст цсснано = захтевају("цсснано")
конст постцссПресетЕнв = захтевају("постцсс-пресет-енв")
модул.екпортс = {
 додаци: [
 цсснано({
 унапред подешено: 'подразумевано'
 }),
 постцссПресетЕнв({ фаза: 1})
 ]
}

Требало би да прођете само фазу новог ЦСС кода који намеравате да користите. У овом случају, претпостављамо да је функција гнежђења у фази 1. Када поново покренете команду изградње и проверите прегледач, видећете да је компајлирао угнежђени код у стандардни ЦСС који прегледач може да разуме.

Коришћење ПостЦСС-а са оквирима

Ручно конфигурисање ПостЦСС-а може бити мало мука. Због тога скоро сви модерни оквири долазе са алатима за груписање (нпр. Вите, Сновпацк и Парцел), а ови алати ће имати уграђену подршку за ПостЦСС. Чак и ако то не ураде, процес додавања ПостЦСС подршке је невероватно лак.

Увек запамтите да Вите и већина других пакета користе Систем модула ЕС6, не ЦоммонЈС. Да бисте ово заобишли, потребно је да користите увоз изјава уместо захтевају() у вашем постцссцонфиг.јс фајл:

увоз цсснано из"цсснано"
// Конфигурациони код иде овде

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

Сазнајте више о СаСС-у

ПостЦСС је само један од десетина ЦСС претпроцесора који су тренутно доступни. Један од њих је СаСС, што је скраћеница за синтаксички сјајне листове стилова.

Научити да користите други главни предпроцесор може бити од користи као ЦСС програмер.