Özellikleri Gruplama

ozellikleri-gruplama (büyük resim için tıklayın)

Aynı isim uzayına bağlı css özellikleri gruplanabilir. Örneğin border düşünelim. Bu border'a ait style, width, color ve radius özellikleri var, bu özellikler yine bu border'ın üst, alt sol ve sağ kısımlarında da kullanılabilir. Scss ile her biri için tanımlama yaparken her seferinde border ile belirtmemize gerek yok. Örneğin üst ve alt kısımları kısa çizgili siyah, sol ve sağ kısımları devamlı çizgili kırmızı olan border oluşturalım.

HTML kod blokları aşağıdadır.

  • <div class="box1">
    • <p>Box1</p>
  • </div>

SCSS kod blokları aşağıdadır.

  • .box1{
    • border:{
      •  style: solid;
      •  width: 10px;
      •  color: red;
      •  radius: 5px;
      •  top:{
        •   style: dashed;
        •   color: black;
      •  };
      •  bottom:{
        •   style: dashed;
        •   color: black;
      •  }
    • }
  • }

omurserdarr

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

Etiketler

Beğeni

Toplam Beğeni Sayısı: 1