SASS'ta Kalıtım

Bu makale SASS'taki kalıtımı açıklar.

SASS'taki kalıtımı pratik örneklerle açıklayacağız.

YouTube Video

SASS'ta Kalıtım

SASS'ta kalıtım (@extend), bir seçicinin stillerini çoğaltmadan başka bir seçiciye uygulamanızı sağlayan bir mekanizmadır. Aynı stiller markup'ta birden fazla öğe için 'birleştirildiği' ve çıktısı alındığı için, oluşan CSS gereksiz tekrar içermez; ancak yanlış kullanıldığında, istenmeyen seçici birleşmelerine yol açabilir.

Temeller: @extend Nasıl Kullanılır

Aşağıda .btn--primary'nin .btn'in stillerini miras aldığı temel bir örnek bulunmaktadır. @extend, hedef seçiciyi genişleten bir direktiftir.

 1// Base button styles
 2.btn {
 3  padding: 0.5rem 1rem;
 4  border-radius: 4px;
 5  border: 1px solid #ccc;
 6  background: white;
 7  color: #333;
 8}
 9
10/* Primary button extends the base .btn */
11.btn--primary {
12  @extend .btn;
13  background: #007bff;
14  color: white;
15}

• @extend kullanarak, .btn--primary temel .btn stillerini miras alır ve sadece gerekli yerleri geçersiz kılar.

Oluşan CSS

 1.btn, .btn--primary {
 2  padding: 0.5rem 1rem;
 3  border-radius: 4px;
 4  border: 1px solid #ccc;
 5  background: white;
 6  color: #333;
 7}
 8
 9.btn--primary {
10  background: #007bff;
11  color: white;
12}

En İyi Uygulama: Placeholder (%placeholder) Kullanımı

Yer tutucu seçiciler (%name), CSS'ye çıktılanmayan seçicilerdir. Özellikle birden fazla bileşen arasında yalnızca kalıtım için ortak stilleri güvenli bir şekilde paylaşmak istediğinizde yaygın olarak kullanılırlar.

 1// %placeholder will not be output directly
 2%card-base {
 3  padding: 1rem;
 4  border-radius: 6px;
 5  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 6  background: #fff;
 7}
 8
 9/* Components extend the placeholder */
10.card {
11  @extend %card-base;
12  border: 1px solid #eee;
13}
14
15.panel {
16  @extend %card-base;
17  border: 1px solid #ddd;
18}

• .card ve .panel her ikisi de %card-base'den miras alır ve bu sayede ortak stilleri paylaşırken gerektiğinde farklılıklar ekleyebilirler.

Oluşan CSS

 1.card, .panel {
 2  padding: 1rem;
 3  border-radius: 6px;
 4  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 5  background: #fff;
 6}
 7
 8.card {
 9  border: 1px solid #eee;
10}
11
12.panel {
13  border: 1px solid #ddd;
14}

Çoklu Kalıtım (Birden Fazla @extend)

Aynı anda birden fazla placeholder veya sınıf miras alabilirsiniz. Stil tekrar kullanılabilirliği artarken, hangi kuralların hangi seçicilerle birleştirildiğini takip etmek önemlidir.

 1%btn-base {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  border-radius: 3px;
 5}
 6
 7%btn-large {
 8  padding: 0.75rem 1.5rem;
 9  font-size: 1.125rem;
10}
11
12/* Composite button that extends both placeholders */
13.btn--lg {
14  @extend %btn-base;
15  @extend %btn-large;
16  background: #222;
17  color: #fff;
18}

• Bu örnekte bir buton, biri 'base' biri 'size' için olmak üzere iki placeholder miras alıyor.
• .btn--lg, hem %btn-base hem de %btn-large'ı miras alır ve temel yerleşimi daha büyük boyutla birleştirir.

Oluşan CSS

1.btn--lg {
2  display: inline-block;
3  /* %btn-large overrides the padding from %btn-base */
4  padding: 0.75rem 1.5rem;
5  border-radius: 3px;
6  font-size: 1.125rem;
7  background: #222;
8  color: #fff;
9}

@extend Davranışı (Birleştirme Mekanizması) ve 'Seçici Patlaması' Hakkında Uyarılar

@extend, tüm eşleşen seçicileri birleştirerek çıktılar ve bu, bazen istenmeyen seçici birleşimlerine yol açabilir.

Aşağıdaki örnek, aynı temel sınıf birden fazla yerde genişletildiğinde çıktının nasıl artabileceğini gösterir.

 1/* Many components extend .utility */
 2/* A generic utility class */
 3.utility {
 4  margin-bottom: 1rem;
 5}
 6
 7/* Nested selectors that extend .utility */
 8.header {
 9  @extend .utility;
10  .title {
11    font-weight: bold;
12  }
13}
14
15.footer {
16  @extend .utility;
17  .note {
18    color: #888;
19  }
20}
21
22.article {
23  @extend .utility;
24  .content {
25    line-height: 1.6;
26  }
27}
28
29.sidebar {
30  @extend .utility;
31  .section {
32    padding: 1rem;
33  }
34}

• Birden fazla bileşen .utility'yi miras aldığında, seçiciler birleştirilir ve bu, özellikle büyük projelerde CSS'in şişmesine neden olabilir.

Oluşan CSS

 1.utility,
 2.header,
 3.footer,
 4.article,
 5.sidebar {
 6  margin-bottom: 1rem;
 7}
 8
 9.header .title {
10  font-weight: bold;
11}
12
13.footer .note {
14  color: #888;
15}
16
17.article .content {
18  line-height: 1.6;
19}
20
21.sidebar .section {
22  padding: 1rem;
23}

@extend ile .class ve Eleman Seçiciler (Etiketler) — Öncelik ve Yan Etkiler

@extend yalnızca sınıflara değil, aynı zamanda eleman seçicilerine de uygulanabilir. Ancak, elemanları genişletmek etkilenen kapsamı artırır ve kuralların istenmeyen yerlerde farkında olmadan uygulanma riskini yükseltir.

Aşağıda bir eleman seçiciyi genişletmenin ve bunun yol açabileceği etkinin bir örneği var.

 1/* Extending an element selector (not recommended) */
 2h1 {
 3  font-size: 2rem;
 4  margin-bottom: 0.5rem;
 5}
 6
 7/* If you extend h1, the resulting selector will include your class with h1 */
 8.title {
 9  @extend h1;
10  color: #333;
11}
12
13/* Output becomes:
14h1, .title { font-size: 2rem; margin-bottom: 0.5rem; }
15*/

• Bu örnekte, eleman seçici h1'in miras alınması, .title'ın h1 ile aynı stillerle birleştirilmesine yol açar.
• Küçük ölçekli durumlarda kullanışlı gibi görünse de, projeniz büyüdükçe h1 için olan kurallar beklenmedik şekilde .title ile birleşebilir ve bu da stilleri daha karmaşık hale getirip bakımını zorlaştırır. Bu nedenle, stilleri öncelikle sınıflar ve yer tutucular etrafında tasarlamak onların bakımını kolaylaştırır.

Oluşan CSS

1h1,
2.title {
3  font-size: 2rem;
4  margin-bottom: 0.5rem;
5}
6
7.title {
8  color: #333;
9}

@extend ve !optional Kullanım Durumları

@extend ile birlikte !optional belirtirseniz, kalıtım hedefi mevcut olmadığında hataları engelleyebilirsiniz. Bu, özellikle kütüphane benzeri kodlarda veya yer tutucuların koşullu olarak tanımlandığı durumlarda faydalıdır.

Aşağıda, var olmayabilecek bir sınıfı !optional ile güvenli şekilde miras alma denemesinin bir örneği vardır.

1/* Try to extend a class that might not exist */
2.component {
3  @extend .maybe-existing !optional;
4  padding: 1rem;
5}

• Eğer .maybe-existing yoksa bir şey olmaz ve atlanır. Bir genişletmeyi güvenli şekilde denemek istediğinizde bunu kullanabilirsiniz.

Oluşan CSS

1.component {
2  padding: 1rem;
3}

@extend ve Mixins (@mixin / @include) Karşılaştırması

@extend ve @mixin bazen benzer amaçlara sahip olabilir fakat çıktı ve kullanım durumları farklıdır.

• @extend

  • Oluşan CSS, seçicileri birleştirerek tekrarı azaltır.
  • Seçiciler çıktı alındıktan sonra birleştirildiği için, istenmeyen birleşimler oluşabilir.
  • Parametreler aktarılamaz (ama bu eksiklik, placeholder'ların birleştirilmesiyle telafi edilebilir).

• @mixin / @include

  • Her çağrı stilleri çoğaltır (gereksiz çıktıya neden olur).
  • Parametre gönderebilir ve şart veya döngü gibi mantık ekleyebilirsiniz.
  • Çıktı daha öngörülebilirdir, ancak dosya boyutu büyür.

Aşağıda aynı buton stilini hem @mixin hem de @extend kullanarak karşılaştırma örneği verilmiştir.

 1/* Mixin approach */
 2@mixin btn-styles($bg, $color) {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  background: $bg;
 6  color: $color;
 7  border-radius: 4px;
 8}
 9
10/* Use mixin */
11.btn {
12  @include btn-styles(white, #333);
13}
14
15.btn--primary {
16  @include btn-styles(#007bff, white);
17}
18
19/* Extend approach (shared placeholder) */
20%btn-base {
21  display: inline-block;
22  padding: 0.5rem 1rem;
23  border-radius: 4px;
24}
25
26.btn2 {
27  @extend %btn-base;
28  background: white;
29  color: #333;
30}
31
32.btn2--primary {
33  @extend %btn-base;
34  background: #007bff;
35  color: white;
36}

• @mixin stilleri esnek şekilde eklemenizi sağlarken, @extend çıktıyı verimli şekilde birleştirir; böylece kullanım durumuna göre uygun olanı seçebilirsiniz.

Oluşan CSS

@mixin'den Çıktı

 1.btn {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  background: white;
 5  color: #333;
 6  border-radius: 4px;
 7}
 8
 9.btn--primary {
10  display: inline-block;
11  padding: 0.5rem 1rem;
12  background: #007bff;
13  color: white;
14  border-radius: 4px;
15}

@extend'den Çıktı

 1.btn2,
 2.btn2--primary {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn2 {
 9  background: white;
10  color: #333;
11}
12
13.btn2--primary {
14  background: #007bff;
15  color: white;
16}

Uygulamalı Rehber

SASS kalıtımı, stil tekrar kullanılabilirliğini artırmak için güçlü bir özelliktir. Ancak yanlış kullanım, stil birleştirmeyi karmaşık hale getirip sürdürülebilirliği azaltabilir. Aşağıda kalıtımı güvenli ve verimli bir şekilde kullanmak için önemli noktalar verilmiştir.

• Yalnızca yapı ve düzen gibi tamamen ortak bileşen stilleri için yer tutucular kullanın. Ayrıca, dinamik parametreleştirme gerekiyorsa, @mixin kullanabilirsiniz.
• h1 gibi HTML elemanlarını doğrudan miras almaktan kaçınmalısınız. İstenmeyen seçici kombinasyonları meydana gelebilir ve bu da beklenmedik CSS'nin oluşturulmasına neden olabilir.
• BEM gibi adlandırma kuralları veya net ön ekler kullanmak, her placeholder'ın ne için olduğunu göstermek ve güvenliği korumak açısından yararlıdır.
• @extend'i aynı dosya içinde kullanmak daha güvenlidir. Özellikle büyük projelerde, kalıtım ilişkilerini takip etmeyi kolaylaştırmak için kalıtımı her bileşenin kapsamı içinde tasarlamak tavsiye edilir.

Özet

SASS'taki @extend özelliği, ortak stilleri verimli bir şekilde tekrar kullanmak ve tasarım tutarlılığını sağlamak için kullanışlı bir yöntemdir. Ancak, seçici kombinasyonları kolayca karmaşık hale gelebileceğinden, bu özelliğin dikkatli ve sınırlı bir kapsamda kullanılması gereklidir. Ortak stilleri yer tutucu seçiciler (%placeholder) ile gruplandırarak ve dinamik parametre gerektiren bölümler için @mixin kullanarak, basit ve bakım kolay tasarımlar oluşturabilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video