Sass-Scss Extend Kullanımı

sezaialkan
Sezai Alkan Frontend Developer

Sass ve scss de Extend kullanımı bir sınıfı farklı bir sınıfı için kopyalamaya , miras almaya yaramaktadır. İlk bakışta mixin kullanımına benzmektedir fakat örneklerde de görüleceği gibi kod tekrarını büyük oranda azaltmaktadır.

Örnek olarak bir kategori menüsünde her kategorinin arka plan rengi farklı olabilmektedir.

.php
    border : 1px solid #ddd
    border-radius : 5px
    padding: 15px
    background : blue

.javascript
    border : 1px solid #ddd
    border-radius : 5px
    padding: 15px
    background : yellow

Yukarıdaki örnek üzerinde arka plan renkleri hariç sınıfın tüm özellikleri aynı gözükmektedir. Bu işlemi @mixin ilede yapabilmekteyiz fakat @mixin ile bu işlemi yaptığımızda css tarafında yine kod tekrarını yaşıyor olacağız.

Extend kullanımı ile bir ana sınıf oluşturarak diğer sınıflara miras yolu ile dahil edebilmekteyiz.

.kategori
    border : 1px solid #ddd
    border-radius : 5px
    padding: 15px

.php
    @extend .kategori
    background : blue

.javascript
    @extend .kategori
    background : yellow

Oluşturduğumuz kategori sınıfını php ve javascript sınıflarına @extend ile aynı özellikleri kulanmasını sağlayabilmekteyiz. Extend kullanımında @extend .sinifAdi şeklinde kullanımı mevcuttur

Css Ekran Çıktısı :

.kategori, .php, .javascript {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
}

.php {
  background: blue;
}

.javascript {
  background: yellow;
}

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol