CSS | PostCSS

Məzmun

1. Giriş
2. PostCss niyə məhşurdur?
3. PostCss CLİ yüklənməsi
4. Ən məhşur PostCss əlavələri (plugin-ləri)
5. Autoprefixer-lər
6. Css next əlavə etməsi
7. CSS Modulları
8. Csslint
9. Css nano
10. Digər faydalı əlavə etmələr
11. Sass-dan nə ilə fərqlənir?
12. Faydalı mənbələr

Giriş

PostCss-ı kəşf et.

PostCss modern Css yazmaq üçün mükəmməl köməkçi vasitədir. PostCss elə bir alətdir ki, developer Css kodlarını prosesden əvvəl və ya prosesdən sonra təsir etməyə imkan verən “plugins”-i vardır. PostCss-də çox böyük miqdarda əlavə etmələr vardır ki, bu sizə çoxlu funksionallıq təmin edir.

PostCss niyə məhşurdur?

PostCss bir neçə xüsusiyyət təmin edirki, Css kodlarını yazmaq qabilyyətini inkişaf etdirəcək və seçdiyiniz digər texnologiyalara yaxşı integrasya edəcəkdir.

PostCss CLI yüklənməsi

yarn paketindən istifadə etməklə:

yarn global add postcss-cli

və ya npm:

npminstall -g postcss-cli

Bunlardan biri istifadə edildikdə “postcss” əmri sənin komanda cədvəlində aktiv olacaq.

Misal üçün Css sənədindəki autoprefixer plugin “css/folder” sənədinin içindədir və “main.css file:”-da yaddaşda saxlanılır.

postcss --use autoprefixer -o main.css css/*.css

PostCss CLI üçün daha çox informasiya burdadir:

postcss/postcss-cli

Ən məhşur PostCss əlavələri (plugin-ləri)

PostCSS, CSS-dən istifadə zamanı sizin işinizi asanlaşdırmağa kömək edir. PostCSS ilə nələri etmək mümkünlüyünü anlamaq üçün ən məhşur əlavə köməkçi (pluginləri) vasitələri aşağıda verilmiştir:

Autoprefixer-lər

Autoprefixer, CSS’nizi seçir və bəzi parametrlərin prefixe ehtiyac olub olmadığını göstərir. Auto prefixerlə daha təmiz CSS kodları yaza bilərsiniz.

Nümunə:

a{
display: flex;
}

və avtomatik əlavə edilir:

a{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

Css next əlavə etməsi

Bu əlavə etməsi CSS-in Babelidir. Müasir CSS xüsusiyyətlərindən istifadə etməyə imkan verir və onları köhnə brauzerlər üçün daha uyğun formatlı CSS-ə köçürməyə kömək edir:

1)Autoprefixer istifadə edərək prefikslər əlavə edir (buna görə bunu istifadə edirsinizsə, bir başa Autoprefixer istifadə etməyinizə ehtiyac yoxdur)

2)CSS Dəyişənlərindən istifadə etməyə imkan verir.

3)Sass-dakı kimi yuvalama istifadə etməyə imkan verir

CSS Modulları

PostCSS Modulları CSS Modullarından istifadə etməyə imkan verir. CSS Modulları CSS standartının bir hissəsi deyil, lakin geniş miqyaslı seçicilərə sahib olmaq üçün bir addımdır.

Csslint

Linting-lə düzgün sintaksisdə yazmağa və səhvlərdən xilas olmağa kömək edir.

Css nano

Cssnano CSS-ni minimuma endirir və istifadə edilən kod saxlanması ilə optimizasiyasını həyata keçirir.

Digər faydalı əlavə etmələr

Xoşuma gələnlərdən bəziləri bunlardır:

• Lost Grid əlavə etməsi PostCSS- də grid sistemidir.
• Postcss-sassy, Sass kodlarını yazmağa imkan verir.
• Postcss-nested, Sass içiçə qaydalarını istifadə etmək imkanı təmin edir
• Postcss-nested-parents, içiçə CSS-də hər hansı bir ata seçicisinə istinad edilməyə imkan verir.
• Postcss-simple-vars, Sass kimi dəyişənlərdən istifadə etməyə imkan verir.
• PreCSS, Sass’ın bir çox xüsusiyyətlərini təqdim edir və tam Sass dəyişdirilməsinə ən yaxın olan budur

Sass-dan nə ilə fərqlənir?

PostCSS-in Sass vəya Less kimi CSS ön prosessorlardan fərqi odur ki, yeni xüsusiyyətlərə ehtiyac hiss edikdə əlavə etmək imkanıdır. Sass və ya Less sabit parametrliridir. Yəni standart xüsusiyyəti vardır. Onlar üzərində işləyib genişləndirmək mümkün deyildir. Yuxarıda göstərdiyimiz kimi PostCss-də əlavə edilən əlavə etmələr nəticəsində xüsusiyyətini zənginləşdirmək mümkündür.

Faydalı mənbələr

PostCSS

PostCSS: Sass's New Play Date

Nail Məmmədov

BUTA.İO komandasının rəhbəri: Nail Məmmədov