Kalıtım (Extend/Inheritance)

kalitim-extend-inheritance (büyük resim için tıklayın)

Bir seçicide bulunan css özelliklerini başka seçiciye aktarmak @extend ile mümkün. Örneğin bir kutu şablonu oluşturalım ve bu kutu şablonundan kırmızı, yeşil, mavi arka plana sahip kutular türetelim. HTML kod blokları aşağıdadır.

  • <div class="red">
    • <p>RED</p>
  • </div>
  • <div class="green">
    • <p>GREEN</p>
  • </div>
  • <div class="blue">
    • <p>BLUE</p>
  • </div>
     

Scss kod blokları aşağıda verilmiştir.

  • .box{
    • border: 2px solid black;
    • background-color: black;
    • width: 25%;
    • height: 25%;
    • color: white;
    • margin-bottom: 2px;
    • margin-left: 2px;
  • }
     
  • .red{
    • @extend .box;
    • background-color: red; 
  • }
     
  • .green{
    • @extend .box;
    • background-color: green;
  • }
     
  • .blue{
    • @extend .box;
    • background-color: blue;
  • }

Oluşan CSS kod blokları aşağıdadır.

  • .box, .red, .green, .blue {  
    • border: 2px solid black;  
    • background-color: black;  
    • width: 25%;  
    • height: 25%;  
    • color: white;  
    • margin-bottom: 2px;  
    • margin-left: 2px;
  •  }
  • .red {  
    • background-color: red; 
  • }
  • .green {  
    • background-color: green; 
  • }
  • .blue {
    • background-color: blue; 
  • }

omurserdarr

Ömürcan Serdar, 30 Ağustos 2018 Perşembe 15:30 tarihinde kayıt oldu

Beğeni

Toplam Beğeni Sayısı: 1