К содержанию

SASS'te Seçici Birleştirme

Bazen, iç içe geçmiş yapılar derlendiğinde aralarında boşluk olmadan, bitişik bir şekilde birleşmelerini isteriz. Bunun için, iç içe geçmiş seçicinin adından önce bir ve işareti (&) koymak gerekir:

styles.scssdiv {
  &.block {
    width: 300px;
  }
}

Sonuç olarak, derlemeden sonra aşağıdaki kod elde edilecektir:

styles.cssdiv.block {
  width: 300px;
}

Задание 1

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.scss#block {
  &.xxx {
    width: 300px;
  }
}

Задание 2

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.scss#block {
  .xxx {
    width: 300px;
  }
}

Задание 3

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.scss#block {
  &.xxx {
    &.zzz {
      width: 300px;
    }
  }
}

Задание 4

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.scss#block {
  &.xxx {
    .zzz {
      width: 300px;
    }
  }
}

Задание 5

Aşağıdaki kodun derleme sonucunun ne olacağını açıklayın:

styles.scss#block {
  .xxx {
    &.zzz {
      width: 300px;
    }
  }
}