CSS'yi yönetmek, özellikle makul boyuttaki herhangi bir site için zor olabilir. Bu ön işlemciyle ilgili yardım alın.

İç içe yerleştirme gibi gerçekten harika bir CSS özelliği öğrendiğinizi varsayalım. Ama devam edip denediğinizde, desteğin korkunç olduğunu ve nihayet kullanabilmeniz için yıllar geçeceğini anlıyorsunuz. Bu, PostCSS gibi ön işlemcilerin piyasaya sürülmesine kadar CSS'de büyük bir sorundu.

Geliştirme sırasında PostCSS'nin modern ve geleceğin CSS'sini bugünden kullanmanıza nasıl izin verdiğini öğrenin. PostCSS'nin tam olarak ne olduğunu, onu nasıl kullanabileceğinizi ve özelliklerinden yararlanmanın en iyi yolunu öğreneceksiniz.

Proje Kurulumu

Boş bir klasöre gidin, index.html adlı bir dosya oluşturun ve dosyaya aşağıdaki HTML işaretlemesini ekleyin:

html>
<htmldil="tr">
<KAFA>
<bağlantırel="stil sayfası"href="kaynak/styles.css">
KAFA>


<vücut>
<P>ParagrafP>
<div>Bölümdiv>
vücut>
html>

Bu HTML belgesi bir paragraf oluşturur ve eleman. Ayrıca, adlı bir stil sayfası dosyasını da içe aktarır.

instagram viewer
stiller.css bu içinde kaynak dosya. Dosyayı şurada oluşturun: kaynak klasörünü açın ve aşağıdaki CSS stil kurallarını ekleyin:

vücutP {
renk: turuncu;
}
vücutdiv {
renk: mavi;
}
vücut {
görüntülemek: Kafes;
}

Bu CSS, sayfadaki her iki öğenin rengini şekillendirir ve bir ızgara düzeni oluşturur. Çoğu tarayıcı, bunun gibi normal CSS sözdizimini destekler. Ancak, daha yeni sözdizimini gördüğünüzde, PostCSS'yi getirmeniz gerekecek.

Node.js Projesi Oluşturma ve PostCSS Kurma

Basit bir ifadeyle PostCSS, modern CSS'yi çoğu tarayıcının anlayabileceği bir şeye dönüştürmenize olanak tanır; yaygın olarak aktarma olarak bilinen bir işlem. Kodunuzda büyük tarayıcıların desteklemeyebileceği yeni, deneysel veya standart olmayan CSS özelliklerini denemek istiyorsanız bu mükemmel.

PostCSS ayrıca, CSS küçültme, renk desteği ve çizgi desteği gibi belirli özellikleri etkinleştirmek için yükleyebileceğiniz zengin bir JavaScript eklentileri ekosistemi sunar.

PostCSS'i kullanmak için yapmanız gereken ilk şey, yeni bir Node.js projesi başlatmaktır:

npm başlatma -y

Bu komut, uygulamanız için varsayılan değerleri içeren bir package.json dosyası oluşturur.

Ardından, hem PostCSS'yi hem de PostCSS CLI'yi kurun. İkinci paket, PostCSS'yi komut satırından çalıştırmanıza izin verir:

npm i --save-dev postcss postcss-cli

bu --save-dev bayrak her ikisini de yükler npm paketleri geliştirici bağımlılıkları olarak; geliştirme sırasında CSS kodunu işlemek için yalnızca PostCSS ve eklentilerini kullanacaksınız.

aracılığıyla PostCSS kullanmaya başlamak için komut satırı arayüzü, senin içine gir paket.json dosyalayın ve basit olanı oluşturun yapı: css PostCSS ile aktarma komutu:

"Kodlar": {
"derleme: css": "postcss src/styles.css --dir hedef -w"
}

Bu komut, çıplak CSS'nizi alacaktır ( kaynak/stil.css), kodu kopyalayın ve ardından çıktısını hedef dosya. çalışan npm yapı: css komutu bu klasörü oluşturur ve onu stiller.css tarayıcı tarafından okunabilen kod içeren dosya.

CSS'nizi HTML'ye aktarırken, PostCSS'nin derlediği kaynak klasörden değil, CSS'nizi derlediğiniz hedef klasörden içe aktardığınızdan emin olun. Bizim durumumuzda bu, mesafe klasör, değil kaynak dosya.

Web sitenizi bir tarayıcıda açarsanız, sitenin hala CSS'ye eriştiğini göreceksiniz. Kaynak dosyada her değişiklik yaptığınızda, PostCSS kodu yeniden derler ve değişiklikler web sayfasına yansır.

PostCSS Eklentilerini Kullanma

yüzlerce var PostCSS eklentileri PostCSS'ye önekler, dizgiler, yeni sözdizimi desteği ve düzinelerce başka özellik eklemek için. Bir PostCSS eklentisi kurduktan sonra, onu içinde etkinleştirirsiniz. postcss.config.js file — PostCSS için tüm yapılandırmaları ayarlamak için kullanabileceğiniz bir JavaScript dosyası.

Yükle cssnano Aşağıdaki komutla PostCSS eklentisi:

npm i --save-dev cssnano

Bir kez daha, bu bağımlılıkları geliştirme bağımlılıkları olarak kaydetmeniz yeterlidir. Bunun nedeni, tüm bunların siz gelişirken gerçekleşmesidir. Siteyi üretime geçirdikten sonra PostCSS'e veya herhangi bir eklentisine ihtiyacınız yoktur.

Yeni yüklenen cssnano eklentisini kullanmak için, içine aşağıdaki kodu eklemelisiniz. postcss.config.js dosya:

sabit cssnano = gerekmek("cssnano")
modül.ihracat = {
 eklentiler: [
 cssnano({
 ön ayar: "varsayılanlar"
 })
 ]
}

Şimdi, terminale geri dönüp build komutunu yeniden çalıştırırsanız, bu, çıktı CSS'sini küçültecektir (yani, kodu mümkün olduğu kadar küçük yapın). Dolayısıyla, üretime hazır bir siteye geçtiğinizde, bu, CSS'nizi olabildiğince küçültecektir.

Yuvalama Gibi Modern Özellikleri Kullanma

Biçembentinizde iç içe sözdizimini kullanmak istediğinizi varsayalım, böylece paragraf bloğunu kaynak/stil.css Bununla:

vücut {
 & P {
renk: turuncu;
 }
}

Bu kod, başlangıç ​​kodunuzdaki sürümle aynıdır. Ancak sözdizimi çok yeni olduğu ve çoğu web tarayıcısı bunu desteklemediği için bu bir hata verecektir. PostCSS'yi yükleyerek bu sözdizimi için desteği etkinleştirebilirsiniz. postcss-preset-env Eklenti.

Eklenti, hangi aşamada olduğuna bağlı olarak CSS'yi işlemek için bir dizi farklı eklentiyi bir araya getirir. Aşama 0, CSS'ye bile giremeyebilecek süper deneysel özellikleri temsil eder. Oysa 4. aşama, halihazırda CSS spesifikasyonunun bir parçası olan dil özellikleri içindir.

Varsayılan olarak, şimdiki ortam 2. aşama özelliklerini kullanır (bunlar büyük olasılıkla CSS'ye dönüşür). Ancak yapılandırma dosyasında aşamayı istediğiniz gibi değiştirebilirsiniz.

Eklentiyi yüklemek için aşağıdaki komutu çalıştırın:

npm i --save-dev postcss-preset-env

Sonra senin içinde postcss.config.js dosya, eklentiyi içe aktaracak ve kaydedeceksiniz:

sabit cssnano = gerekmek("cssnano")
sabit postcssPresetEnv = gerekmek("postcss-preset-env")
modül.ihracat = {
 eklentiler: [
 cssnano({
 ön ayar: "varsayılanlar"
 }),
 postcssPresetEnv({ sahne: 1})
 ]
}

Yalnızca kullanmayı düşündüğünüz yeni CSS kodunun aşamasını geçmelisiniz. Bu durumda, iç içe yerleştirme özelliğinin 1. aşamada olduğunu varsayıyoruz. Build komutunu yeniden çalıştırıp tarayıcıyı kontrol ettiğinizde, iç içe kodun tarayıcının anlayabileceği standart CSS'de derlendiğini göreceksiniz.

PostCSS'yi Çerçevelerle Kullanma

PostCSS'yi manuel olarak yapılandırmak biraz zahmetli olabilir. Bu nedenle, neredeyse tüm modern çerçeveler birleştirme araçlarıyla (örneğin, Vite, Snowpack ve Parcel) birlikte gelir ve bu araçlar yerleşik PostCSS desteğine sahip olacaktır. Olmasalar bile, PostCSS desteği ekleme süreci inanılmaz derecede kolaydır.

Her zaman Vite ve diğer paketleyicilerin çoğunun kullandığını unutmayın. ES6 Modül Sistemi, CommonJS değil. Bunu aşmak için, kullanmanız gerekir içe aktarmak yerine ifade gerekmek() senin içinde postcssconfig.js dosya:

içe aktarmak cssnano itibaren"cssnano"
// Konfigürasyon kodu buraya gelir

Eklentileri yüklediğiniz sürece, her şey yolunda gidecektir.

SaSS Hakkında Daha Fazlasını Öğrenin

PostCSS, şu anda mevcut olan düzinelerce CSS ön işlemcisinden yalnızca biridir. Bunlardan biri, sözdizimsel olarak harika stil sayfaları anlamına gelen SaSS'dir.

Başka bir büyük ön işlemci kullanmayı öğrenmek, bir CSS geliştiricisi olarak kullanışlı olabilir.