Есть ли лучший способ использовать вложенные SASS & селекторы в этом сценарии?

Question

Мне нужно выбрать дочерний элемент, но он основан на: last-of-type на родительском.

Я пробовал:

&:last-of-type {
  &__content {
    border-bottom: 0;
  }
}

Что неработать из-за способа построения SASS.

Я закончил с:

.assignment-selection {
  &__list-item {
    &__content {
      border-bottom: 1px solid;
    }
    &:last-of-type {
      .assignment-selection {
        &__list-item {
          &__content {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

Есть ли более хороший / более эффективный способ написать это?

Answer 1

Это должно сделать это

&:last-of-type > &__content {
  border-bottom: 0;
}

Answer 2

То, что SASS позволяет вкладывать, не означает, что мы всегда должны вкладывать, поскольку это делает CSS немного нечитаемым, тем более в инструментах разработчика браузера, которые затрудняют отладку кода .

.assignment-selection {
  &__list-item {
    &__content {
      border-bottom: 1px solid;
    }
  }
}

.assignment-selection:last-of-type {
  &__list-item {
    &__content {
      border-bottom: 0;
    }
  }
}

Answer 3

Вы можете решить эту проблему с помощью обычного CSS, как это (если это опция)

css:

.parent>li {
  border: 1px solid red;
}

.parent:last-of-type>li {
  border: 1px solid green;
}

html:

<div class="parent">
  <li class="child">text</li>
</div>
<div class="parent">
  <li class="child">text</li>
</div>
<div class="parent">
  <li class="child">text</li>
</div>

этосвязанная скрипка: http://jsfiddle.net/ugskwa7t/