CSS Sihirbazı Yapmanız İçin 10 Müthiş PostCSS Eklentisi
PostCSS mümkün kılan çok yönlü bir araçtır JavaScript eklentileriyle CSS stillerini dönüştürme. Esnekliği, inşa edildiği şekilde yatmaktadır.
PostCSS'nin çekirdek kısmı, npm ile yükleyebileceğiniz bir Node.js modülüdür ve projenizde kullanmayı seçebileceğiniz 200'den fazla eklentinin ekosistemi vardır..
PostCSS ne bir ön işlemci, ne de bir post işlemci değildir, çünkü farklı PostCSS eklentileri bu kategorilerden birine veya her ikisine de düşebilir; Tamamen sana ne yaptığına bağlı. PostCSS ile farklı bir sözdizimi öğrenmeye gerek yok Sass veya LESS durumunda olduğu gibi; hemen kullanmaya başlayabilirsiniz.
PostCSS mevcut CSS dosyanızı alır ve JavaScript tarafından okunabilir verilere dönüştürür, ardından JavaScript eklentileri değişiklikleri yapar ve PostCSS orijinal dosyanın değiştirilmiş halini döndürür. Kulağa hoş geliyor, değil mi??
Bu yayında, 10 PostCSS eklentisine bir göz atacağız. size ulaşabileceğiniz bazı harika şeyler hakkında bir fikir verin bu harika araçla.
1. Otomatik Düzeltici
Autoprefixer Google, Twitter ve Shopify gibi önemli teknoloji şirketleri tarafından kullanıldığı için muhtemelen en iyi bilinen PostCss eklentisidir. O gerektiğinde CSS kurallarına satıcı önekleri ekler.
Autoprefixer Kullanabileceğim verileri kullanır. Bu şekilde tarihlenmez ve her zaman en yeni kuralları uygulayabilir. İnteraktif demo sitesinde nasıl çalıştığını kontrol edebilirsiniz..
2. CSSnext
CSSnext bir CSS aktarıcısı gelecekteki CSS sözdizimini mevcut sitelerde kullanmanızı sağlar. W3C, şu anda tarayıcılar tarafından uygulanmayan birçok yeni CSS kuralına sahiptir, ancak geliştiricilerin daha karmaşık CSS'leri daha hızlı ve kolay yazmasını sağlayabilir. CSSnext bu açığı kapatmak için yapıldı.
Onunla neler başarabileceğini görmek için özelliklerine bir göz atmaya değer, örneğin; özel medya sorguları, özel seçiciler, renk değiştiriciler, SVG filtreleri ve yeni sahte gözlükler kullanın tasarımlarında.
3. PreCSS
PreCSS CSS önişlemcisi gibi çalışan PstCSS eklentilerinden biridir. Mümkün kılar sytlesheet dosyalarınızda Sass benzeri bir markanın avantajından yararlanın.
PreCSS'yi iş akışınıza ekleyerek değişkenleri kullanabilirsiniz, if-else ifadeleri, için döngüler, karışımlar, @extend ve @ithalat Kurallar, yerleştirme ve CSS kodunuzdaki diğer birçok kullanışlı özellik. PreCSS’nin Github belgeleri size en iyi şekilde nasıl yararlanabileceğinize dair ayrıntılı talimatlar verir..
4. StyleLint
StyleLint modern bir CSS linter olduğunu CSS kodunuzu düzeltin ve doğrular. Hatalardan kaçınmayı kolaylaştırır ve sizi tutarlı kodlama kurallarına uymaya zorlar.
StyleLint, en son CSS sözdizimini anlar, bu nedenle önceden bahsedilen PreCSS eklentisi ile birlikte kullanılabilir. Ayrıca, kendi yapılandırmanızı yapmanıza ve hatta ayarlarınızın geçerli olup olmadığını kontrol etmenize olanak sağlar..
5. PostCSS Varlıkları
PostCSS Varlıklar eklentisi kullanışlı CSS dosyalarınız için varlık yöneticisi. PostCSS Varlıkları stil sayfası dosyalarınızı çevresel değişikliklerden izole ettiğinden, URL yollarında sorun yaşamaya eğilimliyseniz, bu harika bir seçim olabilir..
Yük yollarını, göreceli yolları ve temel yolu tanımlamanız gerekir; eklenti ihtiyacınız olan varlıkları otomatik olarak arar. Örneğin, URL’nin doğru URL’sine ihtiyacınız varsa aşağıdaki kodu yazabilirsiniz. foobar.jpg resim:
body background: solve ('foobar.jpg'); PostCSS Varlıkları da varlıklar önbelleğini önemser, ayarlayabildiğiniz gibi cachebuster Bir varlığın değiştirilmesi durumunda URL yollarının otomatik olarak değiştirilmesini istiyorsanız, true olarak değişir. Bu akıllı eklenti ayrıca görüntü dosyalarının boyutlarını (genişlik ve yükseklik) hesaplar veya önceden ayarlanmış bir oran kullanarak bunları yeniden boyutlandırır..
6. CSSNano
Bir üretim sitesi için optimize edilmiş ve küçültülmüş CSS dosyalarına ihtiyacınız varsa, incelemeye değer CSSNano. Birçok daha küçük, tek sorumluluk gerektiren PostCSS eklentisinden oluşan modüler bir eklentidir. Yalnızca boşlukları kaldırmak gibi basit küçük teknikler değil, aynı zamanda odaklanmış optimizasyonları mümkün kılan gelişmiş seçeneklere de sahiptir.
Diğer birçok özellik arasında, CSSNano, z-endeks değerlerini yeniden değerlendirebilir, özel tanımlayıcıları azaltabilir, uzunluk, zaman ve renk değerlerini dönüştürme ve eski satıcı öneklerini kaldırabilir..
7. yazı tipi sihirbaz
Eğer sofistike tipografi hayranıysanız, kesinlikle Yazı Tipi Büyücü PostCSS eklentisi. Font Magician'ın büyüsü, onun yeteneğine dayanır. tüm gerekli olanları otomatik olarak üreterek @ Font-face kurallar.
Nasıl çalışır oldukça basittir, sadece eklemek gerekir font-family: "Benim Fav Fontum"; CSS bir HTML öğesine hükmeder ve Font Magician, işin geri kalanını yapar. Bir fontun yerel kopyası olan Google Fonts ekleyebilir, Bootstrap tipografisi ve fontları senkronize olmayan şekilde yükleyebilir. İşte interaktif demo sitesi.
8. SVG'yi yazın
SVG'yi doğrudan CSS dosyalarınıza yazmanın ne kadar havalı olacağını hiç merak ettiniz mi? SVG PostCSS Yazma eklentisi sayesinde bu hedefe kolayca ulaşabilirsiniz..
Bu kullanışlı eklenti, örneğin, mümkün kılar SVG arka planlarınızı ve simgelerinizi CSS dosyanızda saklayın, ve sonra bunları ilgili HTML öğesine ekleyin Aşağıdaki şekilde:
@svg square @rect fill: var (- renkli, siyah); genişlik:% 100; yükseklik:% 100; .example arka plan: beyaz svg (kare param (- renk # 00b1ff)) kapağı;
9. Kayıp Izgara
Kayıp Izgara etkileyici bir özellik sunan harika bir PostCSS eklentisidir. CSS ızgara sistemi bu sadece düz CSS ile çalışır aynı zamanda önişlemci dilleri (Sass, LESS, Stylus). Kullanır hesaplanan () Özelleştirme ile çok fazla zaman harcamadan kolayca kullanabileceğiniz güzel ızgaralar oluşturmak için CSS işlevi.
Kayıp Izgara'nın kuralları oldukça kolaydır; örneğin,% 25 genişliğinde bir sütun tanımlamak bu küçük kod parçasından daha fazlasını gerektirmez:
div kayıp sütun: 1/4;
10. PostCSS Sprite'ları
PostCSS Sprite eklenti kolaylaştırır görüntü sprite oluşturmak, yani, tek bir dosyaya yerleştirilmiş görüntülerin koleksiyonları. Birkaç seçenek ayarladıktan sonra, eklenti görüntüleri stil sayfanızdaki dosyadan alır, bunları bir hareketli grafiğe birleştirir, daha sonra gerektiğinde resim referanslarını günceller.
Sprite içine hangi görüntüleri koymak istediğinizi belirlemek için farklı filtreler ve gruplayıcılar kullanabilir ve çıktı görüntüsünün boyutlarını da ayarlayabilirsiniz..
