Özellikleri Gruplama

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