Sass-Scss Extend Kullanımı

Sezai AlkanFrontend Developer

Sass-Scss #scss #sass #css #extend

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;
}