PostCSS: Sass'ın Yeni Oyun Tarihi

Son zamanlarda, PostCSS, web geliştirmenin ön uç tarafında tur yapan bir araçtır.

PostCSS, Autoprefixer'ın yaratıcısı Andrey Sitnik tarafından geliştirilmiştir. JavaScript kullanarak tüm CSS'nizi dönüştürmek için bir araç olarak geliştirilmiş bir Node.js paketidir, böylece diğer işlemcilerden çok daha hızlı oluşturma süreleri elde eder.

Adının ima ettiği gibi görünse de, bir post-işlemci değildir (ya da bir ön işlemci değildir), daha ziyade PostCSS'ye özgü (veya daha kesin olmak gerekirse PostCSS eklentisine özgü) sözdizimini dönüştürmek için bir aktarıcıdır. vanilya CSS'si.

Bununla birlikte, bu PostCSS ve diğer CSS işlemcilerinin birlikte çalışamayacağı anlamına gelmez. Aslına bakarsanız, CSS ön/son işlem dünyasında yeniyseniz, PostCSS'yi Sass ile birlikte kullanmak size birazdan değineceğimiz birçok baş ağrısından kurtarabilir.

PostCSS, diğer CSS işlemcilerinin yerini almaz; daha ziyade, gerektiğinde kullanışlı olabilecek başka bir araç, araç setinize başka bir ek olarak görün.

PostCSS'nin kullanımı, bugün Twitter, JetBrains ve Wikipedia gibi en büyük teknoloji endüstrisi işletmelerinden bazıları tarafından kullanılmasıyla, son zamanlarda katlanarak artmaya başladı. Yaygın olarak benimsenmesi ve başarısı, büyük ölçüde modülerliğinden kaynaklanmaktadır.

Eklentiler, Eklentiler, Eklentiler

PostCSS tamamen eklentilerle ilgilidir.

Kullanacağınız eklentileri seçmenize, gereksiz bağımlılıkları ortadan kaldırmanıza ve diğer önişlemcilerin temel özellikleriyle birlikte çalışmak için hem hızlı hem de hafif bir kurulum yapmanıza olanak tanır. Ayrıca, verimli tutarken iş akışınız için daha yoğun şekilde özelleştirilmiş bir yapı oluşturmanıza olanak tanır.

Bu yazının yazıldığı tarih itibariyle, PostCSS, her biri farklı görevlerden sorumlu 200'den fazla eklenti deposuna sahiptir. PostCSS'nin GitHub deposunda, eklentiler "Küresel CSS sorunlarını çözün", "Geleceğin CSS'sini bugün kullanın", "Daha iyi CSS okunabilirliği", "Görüntüler ve yazı tipleri", "Linterler" ve "Diğerleri" kategorilerine göre sınıflandırılır.

Ancak eklentiler dizininde daha doğru bir sınıflandırma bulacaksınız. Birkaçının yetenekleri hakkında daha iyi bir fikir edinmek için oraya bir göz atmanızı tavsiye ederim; oldukça geniş ve oldukça etkileyici.

Muhtemelen popüler bir bağımsız kitaplık olan en popüler PostCSS eklentisi Autoprefixer'ı duymuşsunuzdur. İkinci en popüler eklenti, örneğin tarayıcı desteği hakkında endişelenmeden CSS'nin yeni özel özellikleri gibi bugünün en son CSS sözdizimini kullanmanıza izin veren bir eklenti olan CSSNext'tir.

Yine de tüm PostCSS eklentileri bu kadar çığır açıcı değildir. Bazıları size, muhtemelen diğer işlemcilerle birlikte kutudan çıkan yetenekler sunar. Örneğin parent selector alın. Sass ile Sass'ı kurar kurmaz hemen kullanmaya başlayabilirsiniz. PostCSS ile postcss-nested-ancestors eklentisini kullanmanız gerekir. mixins extends karışımlar için de geçerli olabilir.

Peki PostCSS ve eklentilerini kullanmanın avantajı nedir? Cevap basit - kendi savaşlarınızı seçebilirsiniz. Sass'ın kullanacağınız tek parçasının parent selector olduğunu düşünüyorsanız, CSS'nizi derlemek için ortamınızda bir Sass kitaplığı kurulumu gibi bir şey uygulamanın stresinden kendinizi kurtarabilir ve kullanarak süreci hızlandırabilirsiniz. yalnızca PostCSS ve postcss-nested-ancestors eklentisi.

Bu, PostCSS için sadece bir örnek kullanım durumudur, ancak bir kez kendiniz kontrol etmeye başladığınızda, şüphesiz bunun için birçok başka kullanım durumu fark edeceksiniz.

Temel PostCSS Kullanımı

İlk olarak, bazı PostCSS temellerini ele alalım ve tipik olarak nasıl kullanıldığına bir göz atalım. PostCSS, Gulp veya Grunt gibi bir görev yürütücüsü ile kullanıldığında son derece güçlü olsa da, postcss-cli kullanılarak doğrudan komut satırından da kullanılabilir.

Basit bir örnek kullanım durumunu ele alalım. RGBA formatlı renklerimizin tümüne bir geri dönüş HEX değeri eklemek için postcss-color-rgba-fallback eklentisini kullanmak istediğimizi varsayalım.

NPM postcss , postcss-cli ve postcss-color-rgba-fallback sonra aşağıdaki komutu çalıştırmamız gerekiyor:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

Bu talimatla, PostCSS'ye postcss-color-rgba-fallback eklentisini kullanmasını, src/css/all.css içindeki CSS'yi işlemesini ve onu dist/css/all.css .

Tamam, bu kolaydı. Şimdi daha karmaşık bir örneğe bakalım.

PostCSS'yi Görev Yürütücüler ve Sass ile Birlikte Kullanma

PostCSS, iş akışınıza oldukça kolay bir şekilde dahil edilebilir. Daha önce de belirtildiği gibi, Grunt, Gulp veya Webpack gibi görev yürütücülerle mükemmel bir şekilde bütünleşir ve hatta NPM komut dosyalarıyla bile kullanılabilir. Sass ve Gulp ile birlikte PostCSS kullanımına bir örnek, aşağıdaki kod parçacığı kadar basittir:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

Yukarıdaki kod örneğinin yapısını çözelim.

Gerekli tüm modüllere (Gulp, Contact CSS, Sass, PostCSS ve CSSNext) referansları bir dizi değişkende saklar.

Ardından, stylesheets adı verilen yeni bir Gulp görevi kaydeder. Bu görev, ./src/css/ uzantılı .scss içindeki dosyaları izler (alt dizin yapısında ne kadar derin olduklarına bakılmaksızın), Sass bunları derler ve hepsini tek bir all.css dosyasında birleştirir.

all.css dosyası oluşturulduktan sonra, PostCSS (ve eklenti) ile ilgili tüm kodu gerçek CSS'ye aktarmak için PostCSS'ye iletilir ve ardından ortaya çıkan dosya ./dist/css içine yerleştirilir.

Tamam, yani PostCSS'yi bir görev yürütücüsü ve bir önişlemci ile kurmak harika, ancak bu, PostCSS ile çalışmayı ilk etapta haklı çıkarmak için yeterli mi?

Şöyle koyalım: Sass kararlı, olgun ve arkasında büyük bir topluluk olmasına rağmen, örneğin Autoprefixer gibi eklentiler için PostCSS kullanmak isteyebiliriz. Evet, bağımsız Autoprefixer kitaplığını kullanabilirdik, ancak Autoprefixer'ı PostCSS eklentisi olarak kullanmanın avantajları, daha sonra iş akışına daha fazla eklenti ekleme ve bir tekne dolusu JavaScript kitaplığına fazladan bağımlılıklardan kaçınma olasılığıdır.

Bu yaklaşım aynı zamanda, ön eksiz özellikleri kullanmamıza ve API'lerden alınan değerlere dayalı olarak, Can I Use'daki gibi, yalnızca Sass kullanılarak elde edilmesi zor olan bir şey gibi, ön eklere sahip olmamıza olanak tanır. Bu, kodu öneklemenin en iyi yolu olmayabilecek karmaşık karışımlardan kaçınmaya çalışıyorsak oldukça kullanışlıdır.

Halihazırda Sass kullanıyorsanız, PostCSS'yi mevcut iş akışınıza entegre etmenin en yaygın yolu, .sass veya .scss dosyanızın derlenmiş çıktısını PostCSS ve eklentileri aracılığıyla iletmektir. Bu, hem Sass hem de PostCSS çıktısına sahip başka bir CSS dosyası oluşturacaktır.

Bir görev çalıştırıcı kullanıyorsanız, PostCSS'yi kullanmak, .sass veya .scss dosyanızı (veya tercih ettiğiniz ön işlemcinizin dosyalarını) derledikten hemen sonra, onu şu anda sahip olduğunuz görevlerin ardışık düzenine eklemek kadar kolaydır.

PostCSS, diğerleriyle iyi çalışır ve geliştiriciler olarak her gün yaşadığımız bazı önemli ağrı noktaları için bir rahatlama olabilir.

Başka bir PostCSS örneğine (ve CSSNext ve Autoprefixer gibi birkaç eklenti) ve Sass'ın birlikte çalışmasına bir göz atalım. Aşağıdaki koda sahip olabilirsiniz:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

Kodun bu pasajı, vanilya CSS ve Sass sözdizimine sahiptir. Özel mülkler, bu makalenin yazıldığı gün itibariyle hala Aday Önerisi (CR) durumundadır ve işte burada PostCSS için CSSNext eklentisi devreye girer.

Bu eklenti, özel özellikler gibi şeyleri günümüzün CSS'sine dönüştürmekten sorumlu olacak. Autoprefixer eklentisi tarafından otomatik olarak ön eklenecek olan transform özelliğine benzer bir şey olacaktır. Daha önce yazılan kod, aşağıdaki gibi bir sonuçla sonuçlanacaktır:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

PostCSS için Eklenti Yazma

Daha önce belirtildiği gibi, PostCSS'nin çekici bir özelliği, izin verdiği özelleştirme düzeyidir. Açıklığı sayesinde, JavaScript yazmakta rahatsanız, PostCSS için özel ihtiyaçlarınızı karşılamak için kendi özel eklentinizi yazmak oldukça basit bir iştir.

PostCSS'deki kişilerin başlamak için oldukça sağlam bir listesi var ve bir eklenti geliştirmekle ilgileniyorsanız, önerilen makalelerini ve kılavuzlarını kontrol edin. Bir şey sormanız veya herhangi bir şeyi tartışmanız gerektiğini düşünüyorsanız, Gitter başlamak için en iyi yerdir.

PostCSS, Twitter'da oldukça aktif bir takipçi tabanına sahip API'sine sahiptir. Bu gönderide daha önce bahsedilen diğer topluluk avantajlarıyla birlikte, eklenti oluşturma sürecini bu kadar eğlenceli ve işbirlikçi bir aktivite yapan şey budur.

Bu nedenle, bir PostCSS eklentisi oluşturmak için bir Node.js modülü oluşturmamız gerekiyor. (Genellikle, node_modules/ dizinindeki PostCSS eklenti klasörlerinin önünde, bunların PostCSS'ye bağlı modüller olduğunu açıkça belirtmek için "postcss-" gibi bir önek bulunur.)

Yeni başlayanlar için, yeni eklenti modülünün index.js dosyasına, eklentinin işleme kodunun sarmalayıcısı olacak olan aşağıdaki kodu eklememiz gerekiyor:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

Eklentiye replacecolors adını verdik. Eklenti, deepBlackText anahtar kelimesini arayacak ve #2e2e2e HEX renk değeriyle değiştirecektir:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

Önceki snippet sadece aşağıdakileri yaptı:

1. walkRules() kullanarak, üzerinden geçmekte olduğumuz mevcut .css dosyasındaki tüm CSS kurallarını yineledi.
2. walkDecls() kullanarak, geçerli .css dosyasının içindeki tüm CSS bildirimlerini yineledi.
3. Ardından, bildirimi bildirim değişkeninin içinde depoladı ve içinde deepBlackText dizesinin olup olmadığını kontrol etti. Öyle olsaydı, aşağıdaki CSS bildiriminin tüm bildiriminin yerini aldı: color: #2e2e2e; .

Eklenti hazır olduğunda, onu doğrudan komut satırından şu şekilde kullanabiliriz:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

Veya örneğin, şöyle bir Guplfile'ye yüklendi:

 var replacecolors = require('postcss-replacecolors');

PostCSS'yi Kullanmak İçin Mevcut CSS İşlemcimi Atmalı mıyım?

Bu ne aradığına bağlı.

Hem Sass hem de PostCSS'nin aynı anda kullanıldığını görmek yaygındır, çünkü yeni başlayanlar için PostCSS eklentilerinin özellikleriyle birlikte ön/son işlemcilerin kutudan çıktığı bazı araçlarla çalışması daha kolaydır. Bunları yan yana kullanmak, nispeten yeni ve büyük olasılıkla bilinmeyen araçlarla önceden tanımlanmış bir iş akışını yeniden oluşturmaktan kaçınabilir ve mevcut işlemciye bağlı uygulamaları ( Sass mixins , extensions , parent selector , placeholder selectors gibi) korumanın bir yolunu sağlar. ve bunun gibi).

PostCSS'ye Bir Şans Verin

PostCSS, ön uç geliştirme dünyasında sıcak (bir nevi) yeni şeydir. Kendi başına bir ön/son işlemci olmadığı ve yerleştirildiği ortama uyum sağlayacak kadar esnek olduğu için yaygın olarak benimsenmiştir.

PostCSS'nin gücünün çoğu eklentilerinde bulunur. Aradığınız şey modülerlik, esneklik ve çeşitlilik ise, bu iş için doğru araçtır.

Görev yürütücüler veya paketleyiciler kullanıyorsanız, mevcut akışınıza PostCSS eklemek büyük olasılıkla çocuk oyuncağı olacaktır. Kurulum ve kullanım kılavuzunu kontrol edin ve muhtemelen onu halihazırda kullanmakta olduğunuz araçlarla entegre etmenin kolay bir yolunu bulacaksınız.

Birçok geliştirici, en azından öngörülebilir gelecek için burada kalacağını söylüyor. PostCSS, günümüz CSS'sini nasıl yapılandırdığımız üzerinde büyük bir etkiye sahip olabilir ve bu, potansiyel olarak ön uç web geliştirme topluluğu genelinde standartların çok daha fazla benimsenmesine yol açabilir.