CSS Değişken Oluşturucu
Görsel editörle CSS özel özellikleri (değişkenler) oluşturun. Renk seçiciler ve ön ayarlarla :root blokları oluşturun.
Bu araç hakkında
CSS özel özellikleri (CSS değişkenleri), bir kez tanımlayıp stil sayfalarınız boyunca kullanabileceğiniz yeniden kullanılabilir değerlerdir. Renkler, boyutlar veya diğer değerleri doğrudan CSS'ye kodlamak yerine, bunları bir :root bloğunda değişken olarak saklayabilir ve var(--ad) söz dizimini kullanarak bunlara başvurabilirsiniz. Bu, projeniz genelinde tutarlı tasarım jetonlarını kolay bir şekilde muhafaza etmeyi sağlar ve küresel tema değişikliklerini basitleştirir—sadece değişken değerini güncelleyin ve değişiklik kullanıldığı her yerde uygulanır.
Bu CSS değişken oluşturucuyu kullanarak, kodu manuel olarak yazmadan özel özellikleri görsel olarak oluşturabilir ve düzenleyebilirsiniz. Değişkenleri tek tek ekleyin, karanlık mod, açık mod veya marka renkleri için önceden ayarlanmış tema şablonlarından seçin ve ardından her değişken için ad, tür (renk, boyut, sayı veya dize) ve değeri belirtin. Araç, çıktıyı otomatik olarak satır içi yorumlar içeren geçerli bir :root CSS bloğu olarak biçimlendirir ve her değişkeni stillerinizde nasıl kullanacağınızı gösterir. Oluşturulduktan sonra, CSS'yi doğrudan panonuza kopyalayabilir veya dosya olarak indirebilirsiniz.
Bu araç, tasarım sistemleri oluşturmak, çok markalı temalar bakımını yapmak veya tutarlı boşluk ve tipografi ölçekleri yönetmek için özellikle faydalıdır. İster küçük bir web sitesi ister büyük bir bileşen kitaplığı oluşturuyor olun, merkezi bir CSS değişkenleri seti sahip olmak kod tekrarını azaltır ve tasarım güncellemelerini daha hızlı ve daha güvenilir kılar.
Sıkça Sorulan Sorular
Kod Uygulaması
# Generate CSS :root block from a dictionary of variables
def generate_css_variables(variables: dict) -> str:
lines = [":root {"]
for name, value in variables.items():
var_name = name if name.startswith("--") else f"--{name}"
lines.append(f" {var_name}: {value};")
lines.append("}")
return "\n".join(lines)
# Example: dark mode theme
dark_theme = {
"--bg-primary": "#0f0f0f",
"--bg-secondary": "#1a1a1a",
"--text-primary": "#ffffff",
"--text-secondary": "#a0a0a0",
"--accent": "#6366f1",
"--border-radius": "8px",
"--font-size-base": "16px",
}
print(generate_css_variables(dark_theme))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.