10 Авесоме ПостЦСС Плугинс за Чаробњак за ЦСС
ПостЦСС је невероватно разноврстан алат који омогућава трансформишите ЦСС стилове помоћу ЈаваСцрипт додатака. Његова флексибилност лежи у начину на који је изграђен.
Основни део ПостЦСС-а је Ноде.јс модул који можете инсталирати са нпм, и има екосистем од више од 200 додатака које можете изабрати да користите у свом пројекту..
ПостЦСС није ни претпроцесор, ни постпроцесор, пошто различити ПостЦСС додаци могу пасти у било коју од ових категорија, или обоје; то у потпуности зависи од вас шта ви мислите о томе. Са ПостЦСС, ви не морате научити другу синтаксу као у случају Сасс или ЛЕСС; можете га одмах почети користити.
ПостЦСС узима ваш постојећи ЦСС фајл и претвара га у податке који се читају помоћу ЈаваСцрипта, затим ЈаваСцрипт додатци обављају измене, а ПостЦСС враћа измењену верзију оригиналне датотеке. Звучи цоол, зар не?
У овом посту ћемо погледати 10 ПостЦСС плугина дати вам увид у неке од великих ствари које можете постићи са овом сјајном алатком.
1. Аутопрефикер
Аутопрефикер је вероватно најпознатији ПостЦсс плугин, пошто га користе угледне компаније као што су Гоогле, Твиттер и Схопифи. То додаје префиксима добављача у ЦСС правила гдје је то потребно.
Аутопрефикер користи податке из Цан И Усе. На тај начин се не може датирати и увијек може примијенити најновија правила. Можете проверити како функционише на интерактивном демо сајту.
2. ЦССнект
ЦССнект је ЦСС транспилер вам омогућава да користите будућу ЦСС синтаксу на тренутним локацијама. В3Ц има много нових ЦСС правила која тренутно нису имплементирана од стране претраживача, али могу омогућити програмерима да брже и лакше пишу софистициранији ЦСС. ЦССнект је направљен да премости овај јаз.
Вреди погледати његове карактеристике да бисте видели шта можете да урадите са њим, на пример, можете користите корисничке упите медија, прилагођене селекторе, модификаторе боја, СВГ филтере и нове псеудокласе у вашим нацртима.
3. ПреЦСС
ПреЦСС је један од ПстЦСС додатака који раде као ЦСС претпроцесор. То омогућава искористите Сасс-маркуп у вашим датотекама.
Увођењем ПреЦСС-а у ваш радни процес можете користити варијабле, ако друго изјаве, за петље, мјешавине, @проширити и @увоз правила, гнезда и многе друге корисне функције у ЦСС коду. ПреЦСС-ова Гитхуб документација даје детаљне инструкције о томе како да је најбоље искористите.
4. СтилеЛинт
СтилеЛинт је модеран ЦСС линтер проверава и потврђује ваш ЦСС код. То олакшава избегавање грешака и гура вас да пратите доследне конвенције кодирања.
СтилеЛинт разуме најновију ЦСС синтаксу, тако да се може користити заједно са претходно поменутим ПреЦСС плугин-ом. Такође вам омогућава да направите сопствену конфигурацију, па чак и проверите да ли су подешавања валидна.
5. ПостЦСС имовина
ПостЦСС Ассет плугин је згодан управник средстава за ЦСС датотеке. То може бити одличан избор ако имате проблема са УРЛ стазама, пошто ПостЦСС средства изолују датотеке стила од промена окружења.
Потребно је да дефинишете путање оптерећења, релативне путање и основну стазу, а додатак ће аутоматски тражити потребна средства. На пример, можете написати следећи код ако вам је потребан одговарајући УРЛ фообар.јпг слика:
тело позадина: решење ('фообар.јпг'); ПостЦСС Ассетс алсо брине о кешу имовине, као што можете поставити цацхебустер варијабла у труе ако желите да се УРЛ путање аутоматски мења у случају да је средство измењено. Овај паметни плугин такође израчунава димензије (ширину и висину) сликовних датотека, или их чак мијења величину користећи унапријед одређени омјер.
6. ЦССНано
Ако требате оптимизиране и минифициране ЦСС датотеке за производну веб-локацију, вриједи провјерити ЦССНано. То је модуларни додатак који се састоји од много мањих, једнокомпонентних ПостЦСС додатака. Он не изводи само основне технике минирања као што је уклањање размака, већ има и напредне опције које омогућавају фокусиране оптимизације.
Међу многим другим карактеристикама, ЦССНано је способан да поништи вредности з-индекса, смањује прилагођене идентификаторе, конвертује дужину, време и вредности боја, и уклања застареле префиксе добављача.
7. Фонт Магициан
Ако сте љубитељ софистициране типографије, сигурно ће вам се свидети Фонт Магициан ПостЦСС плугин. Магија Фонт Магичара ослања се на своју способност аутоматски генерише све потребно @ фонт-фаце Правила.
Како то функционише прилично је једноставно, само требате додати фонт-фамили: "Мој Фав Фонт"; ЦСС правило за ХТМЛ елемент, а Фонт Магициан обавља остатак посла. Може да дода Гоогле фонтове, локалну копију фонта, Боотстрап типографију, а такође може асинхроно учитавати фонтове. Ево његове интерактивне демо странице.
8. Напиши СВГ
Јесте ли се икада запитали како би било цоол писати СВГ у ЦСС датотеке? Помоћу Врите СВГ ПостЦСС додатка лако можете постићи овај циљ.
Овај практични додатак, на пример, омогућава да се то уради складиштите СВГ позадине и иконе у ЦСС датотеци, а касније додајте их у релевантни ХТМЛ елемент на следећи начин:
@свг скуаре @рецт филл: вар (- боја, црна); ширина: 100%; висина: 100%; .екампле бацкгроунд: бела свг (квадратна парам (- боја # 00б1фф)) омот;
9. Изгубљена мрежа
Лост Грид је одличан ПостЦСС плугин који вам пружа импресиван ЦСС грид систем то не значи само ради са обичним ЦСС-ом али и са језика препроцесора (Сасс, ЛЕСС, Стилус). Она користи цалц () ЦСС функција за креирање прекрасних решетки које можете лако користити без трошења превише времена са прилагођавањем.
Изгубљена мрежа има прилично јасна правила, на пример, дефинисање колоне са 25% ширине не захтева више од овог малог исечка кода:
див изгубљена колона: 1/4;
10. ПостЦСС Спритес
Тхе ПостЦСС Сприте плугин олакшава генеришите слике духова, тј. збирке слика смештених у једну датотеку. Након што сте подесили неколико опција, плугин узима слике из датотеке стила, спаја их у сприте, а затим ажурира референце слике где год је потребно.
Можете користити различите филтере и групере да бисте одредили које слике желите да ставите у сприте, а можете и да подесите димензије излазне слике.
