İç İçe Yapılar (Nesting)

İç içe yapıları örneklendirelim; alışveriş sitelerindeki üst menüde bulunan kategorileri düşünelim. Bu menüde; giyim, elektronik, oto, ev, süpermarket olabilir. Elektronik üzerinden biraz daha özele gidelim; bilgisayar, telefon, beyaz eşya olabilir. Telefon üzerinden biraz daha özele gidelim; android telefon, ios telefon olabilir. Android telefon üzerinden daha da özele inelim; samsung telefon, oppo telefon, xiaomi telefon olabilir. Doküman üzerinde her bir başlığa ve başlık altındaki elemente erişmek için seçici bildiriminde bulunmam gerekecek ve bu kod tekrarı ile okunaksızlığa sebep olacak. Scss ile kod tekrarının önüne geçmek ve okunaklığı artırmak mümkün. Bunun için kök seçici parantezleri içerisinde alt alta olarak ilgili seçici elementi belirtip stil verebilirim. 

Kategori uyarlamasına benzer olarak hayvanlar alemi üzerinden görselleştirmeyi denedim. Html kod blokları aşağıdadır.

• <ul class="root" style="list-style-type:square;">
•  <li class="x">Agnotozoa</li>
•  <li class="x">
•  Omurgasızlar
•    <ul style="list-style-type:circle;">
•      <li>Parazoa
•        <ol type="I">
•          <li>Placoza</li>
•          <li>Porifera</li>
•        </ol>
•      </li>
•      <li>Eumetazoa
•        <ol type="I">
•          <li>Radiata</li>
•          <li>Bilateria</li>
•        </ol>
•      </li>
•    </ul>
•  <li class="x">
•  Omurgalılar
•  <ul style="list-style-type:circle;">
•    <li>Acrania
•      <ol type="I">
•        <li>Hemichordata</li>
•        <li>Urochordata</li>
•        <li>Cephalochordata</li>
•      </ol>
•    </li>
•    <li>Craniata
•      <ol type="I">
•        <li>Agnatha</li>
•        <li>
•        Gnathostomata
•         <ol type="i">
•              <li>Pisces</li>
•              <li>
•              Tetrapoda
•                <ol style="list-style-type:lower-greek;">
•                      <li><a href="#">Amphibia</a></li>
•                      <li><a href="#">Reptilia</a></li>
•                      <li><a href="#">Aves</a></li>
•                      <li><a href="#">Mammalia</a></li>
•                </ol>
•              </li>
•        </ol>
•        </li>
•      </ol>
•    </li>
•  </ul>
•  </li>
• </ul>

Önce scss kullanmadan stillendirelim.

• .root {  color: red;  font-size: 35px; }
  • .root ul {    color: green;    font-size: 30px; }
    • .root ul ol li {      color: blue;      font-size: 25px; }
      • .root ul ol li ol li {        color: purple;        font-size: 20px; }
        • .root ul ol li ol li ol li a {          color: gray;          font-size: 15px; }
          • .root ul ol li ol li ol li a:hover {          color: red; } 
             

Şimdi scss kullanalım.

• $s-35: 35px;
• $s-30: 30px;
• $s-25: 25px;
• $s-20: 20px;
• $s-15: 15px;
•  
• .root{
• color: red;
• font-size: $s-35;
  • ul{
  • color: green;
  • font-size: $s-30;
    • ol{
      • li{
      • color: blue;
      • font-size: $s-25;
        • ol{
          • li{
          • color: purple;
          • font-size: $s-20;
            • ol{
              • li{
                • a{
                • color: gray;
                • font-size: $s-15;
                • }
                • a:hover{
                • color: red;
                • }
              • }
            • }
          • }
        • }
      • }
    • }
  • }
• }