CSS İşlevleriyle Stil Tekrarını Azaltma

Büyük stil sayfalarını yönetmek, özellikle gradyanlar veya duyarlı düzen kalıpları gibi tasarım sistemi jetonlarıyla çalışırken genellikle tekrarlayan mantığa yol açar.

CSS @function at-kuralı, bu mantığı yeniden kullanılabilir, parametreli işlevlere sığdırmanıza olanak tanır. Böylece CSS'niz daha sürdürülebilir, tutarlı ve DRY (Kendinizi Tekrar Etmeyin) olur.

@function Söz Dizimi

Özel işlevler, @function kuralı ve ardından tireli bir ad ve parametre listesi kullanılarak tanımlanır. İşlev, result özelliğini kullanarak bir değer döndürür.

@function --my-function(--input1 <length>, --input2: default-value) returns <length> {
  /* Logic goes here */
  result: var(--input1);
}

Temel Kavramlar

• Parametreler: Çift kısa çizgiyle (--) başlamalıdır.
• Varsayılanlar: İki nokta üst üste (:) kullanarak varsayılan değerler sağlayabilirsiniz.
• Sonuç: result özelliği, işlevin döndürdüğü değeri belirler. İşlev gövdesinde tanımlanan son result geçerli olur.
• Kapsam: İşlev içinde tanımlanan parametreler ve değişkenler yerel kapsamlıdır.
• Türler: Parametrelerin ve döndürülen değerin, köşeli parantez gösterimiyle (ör. <color>) bir CSS türüyle eşleşmesini zorunlu kılabilir ve type işleviyle (ör. type(<number> | <percentage>)) birden fazla türe izin verebilirsiniz.

Pratik Örnekler

1. Tasarım Sistemi Jetonları (Renk Geçişleri)

Renk gradyanı mantığını kapsülleyerek uygulamanızda tutarlı renk gradyanları elde edin. --angle, tutarlılık sağlamak için geçersiz kılınabilen varsayılan bir değer sağlar.

@function --fancy-gradient(--start-color <color>, --end-color <color>, --angle: 98deg) returns <image>{
  result: linear-gradient(in oklab var(--angle), var(--start-color), var(--end-color) );
}

.card {
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

2. Koşullu Düzen Mantığı

Ortama göre farklı değerler döndürmek için doğrudan bir işlevin içinde @media veya başka sorgular kullanabilirsiniz. Bir işlevde koşullu mantık kullanırken @function, result değerinin ilk değerinde "döndürmez". Bunun yerine CSS basamağını takip eder ve ekran boyutuna, kapsayıcı boyutuna veya diğer sorguya göre eşleşen son değere çözümlenir.

@function --grid-template(--count <number>){
  /* MANDATORY: Put default value first. */
  result: 1fr; /* Default: stack */
  @media (min-width: 800px) {
    result: repeat(var(--count), 1fr); /* Grid on larger screens */
  }
}

main {
  display: grid;
  grid-template-columns: --grid-template(2);
}

En İyi Uygulamalar

• Tireli adlar kullanın: İşlev adlarınızın ve parametrelerinizin önüne her zaman -- ekleyin.
• Varsayılan değerler sağlayın: Mantıklı varsayılan değerler sağlayarak işlevlerinizi daha sağlam hale getirin.
• Basit tutun: Tekrarlanan veya karmaşık mantık için işlevleri kullanın. Basit özellik-değer çiftlerini aşırı karmaşık hale getirmeyin.
• Türleri kullanma: Parametrelerinizin ve döndürülen değerlerinizin beklenen türlerde olduğundan emin olun.
• Önceden derlenmiş alternatifleri değerlendirin: Kullanıcı girişine, medya sorgularına veya diğer istemci tarafı varyasyonlarına bağlı olmayan işlevler için istemci tarafında gereksiz işlem yapmaktan kaçınmak amacıyla CSS ön derleyicisi kullanabilirsiniz.

Yedek stratejiler

CSS işlevlerini desteklemeyen tarayıcılarda, CSS işlevleri kullanılarak ayarlanan değerler geçersiz olur. Diğer tarayıcıları desteklemek için önce özellik için bir yedek değer sağlayın. CSS işlevi desteği olan tarayıcılarda bu değer geçersiz kılınır.

.card {
  /* Provide fallback, in this case a solid color. */
  background: #5d87e9;
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

main {
  /* Provide fallback, in this case a simple stacked default. */
  grid-template-columns: 1fr;
  grid-template-columns: --grid-template(2);
}

Diğer tarayıcıları desteklerken stil tekrarını azaltmanız gerekiyorsa Sass gibi işlevleri olan bir CSS ön derleyicisi kullanabilirsiniz.