SCSS: почему синтаксис селектора родительского потомка не применяет стили?

Question

Разметка:

<div class="form">
  <div class="form-row">
    <div class="text-field">
      /* I want to apply styles for this div */
    </div>
  </div>
</div>

scss стили:

.form {
  &-row {

    // WHY this doesn't work
    .text-field {
      width: 20%;
    }

    // WHY this doesn't work
    div.text-field {
      width: 20%;
    }

    // WHY this doesn't work
    & .text-field {
      width: 20%;
    }


    // This works. I don't want this syntax.
    div[class^='text-field'] {
      width: 20%;
    }
  }
}

Answer 1

все параметры работают правильно ... я просто проверяю, используя цвет фона:

.form {
    &-row {

        // WHY this doesn't work
        .text-field {
            width           : 20%;
            background-color: red;
        }

        // WHY this doesn't work
        div.text-field {
            width           : 20%;
            background-color: red;
        }

        // WHY this doesn't work
        & .text-field {
            width           : 20%;
            background-color: red;
        }


        // This works. I don't want this syntax.
        div[class^='text-field'] {
            width           : 20%;
            background-color: red;
        }
    }
}