İçeriğe atla
TextArray1.41.0
%100 yerel

CSS'den JS'ye nesne dönüştürücü

CSS bildirimlerini React/JS satır içi stil nesnesine dönüştürün ve tekrar geri dönüştürün.

Giriş
Çıkış
İlgili araçlar
CSS biçimlendiriciGeliştirici araçları
CSS küçültücüGeliştirici araçları
JSON'dan TypeScript'eGeliştirici araçları
HTML'den JSX'ye dönüştürücüGeliştirici araçları
i18n anahtar farkıGeliştirici araçları
TOML'den JSON'ye dönüştürücüGeliştirici araçları
CSS'den JS'ye nesne dönüştürücü
Bir CSS bildirimleri bloğu yapıştırın ve bir React veya Preact bileşeninin stil desteğine düşmeye hazır bir JavaScript stili nesnesini geri alın. Her kebab-case özelliği camelCase'e dönüşür - arka plan rengi arka plan rengine, font-size ise fontSize'a dönüşür - ve her şey iki boşluk girintili geçerli bir nesne değişmezi olarak yazdırılır. Bir seçici ve parantezlerle çıplak bildirimleri veya tam bir kuralı yapıştırabilirsiniz; sarma seçici sizin için kaldırılmıştır, bu nedenle bir kuralı doğrudan DevTools'tan kopyalamak işe yarar.
Dönüştürücü her iki yönde de gider. Yönü JS nesnesi → CSS olarak değiştirin ve stil nesnesi sıradan prop: value; CamelCase yeniden tirelenmiş ve dize tırnak işaretleri kaldırılmış şekilde satırlar. Bu, bir stili bir bileşenden bir stil sayfasına taşımayı veya bir dizi satır içi stilin gerçekte ne şekilde oluşturulduğunu kontrol etmeyi kolaylaştırır. --brand-color gibi özel özellikler, geçerli tanımlayıcılar olmadıkları için öndeki çizgileri korur ve tırnak içinde kalırlar ve satıcı önekleri React'in beklediği şekilde ele alınır: -webkit-box-shadow, WebkitBoxShadow olur, -ms- önekleri ise küçük msFlex formunu kullanır.
Varsayılan olarak her değer bir dize olarak yayınlanır; bu güvenli bir seçimdir; birimleri, renkleri ve satır yüksekliği: 1,5 gibi şeyleri olduğu gibi tutar. "Sayı olarak birimsiz değerler"i etkinleştirdiğinizde, z-endeksi veya opaklık gibi saf sayılar, normalde elle yazdığınız şekilde sayı olarak yazılır. Ayrıca projenizin formatlayıcısına uyacak şekilde tek veya çift tırnak işareti de seçebilirsiniz.
Her şey tarayıcınızda çalışır. Yapıştırdığınız CSS hiçbir zaman yüklenmez, dolayısıyla özel bir tasarım sisteminden veya dahili bileşen kitaplığından yapıştırılan stiller makinenizde kalır. Sonucu kopyalayın, dosya olarak indirin veya başka bir araca gönderin.
FAQ
Bir seçiciyle tam bir CSS kuralını işliyor mu?
Evet. Yapıştır `.button { color: red; dolgu: 8 piksel; }` ve seçici ve kaşlı ayraçlar çıkarılır ve geriye yalnızca stil nesnesi kalır. Parantezsiz çıplak bildirimler de işe yarar.
Numaralarım neden tırnak içine alınmış?
Varsayılan olarak her değer bir dizedir, dolayısıyla birimler ve baştaki sıfırlar geçerli olur. "Sayı olarak birimsiz değerler"i açtığınızda bunun yerine z-index: 10 veya opacity: 0,5 gibi saf sayılar sayı olarak yayınlanır.
Satıcı önekleri ve özel özellikler nasıl dönüştürülür?
Satıcı önekleri React'in kurallarına uyar: -webkit-transition, WebkitTransition olur ve -ms- önekleri küçük ms harfini kullanır. --brand-color gibi özel özellikler çizgilerini korur ve geçerli nesne anahtarları olarak alıntılanmış halde kalır.
JS tarzı bir nesneyi tekrar CSS'ye dönüştürebilir mi?
Evet. Yönü JS nesnesi → CSS olarak değiştirin. camelCase anahtarları tirelenir, dize tırnak işaretleri kaldırılır ve her özellik normal bir prop: value; astar.
CSS'im herhangi bir yere yüklendi mi?
Hayır. Dönüştürme işlemi hiçbir sunucu işlemi olmaksızın tamamen tarayıcınızda çalışır, dolayısıyla özel veya dahili bir projedeki stiller cihazınızdan asla ayrılmaz.