Как избавиться от вложеностей в SCSS?

Question

[tytkawa]

Вот какой код:

.present {
    background: red;

    .present__slider {
        height: 310px;
        overflow: hidden;

        .present__list {

            .present__item {
                float: left;
                width: 25%;
                text-align: center;
                background: url(../picture/present__list.png)50% 0 no-repeat;
                padding: 0 15px;
                margin: 0 -15px;

                p {
                    color: #97dfff;
                    font-size: 13px;
                    margin: 12px;

                }
            }
        }
    }
}

При компиляции выводит:

.present {
  background: red; }
  .present .present__slider {
    height: 310px;
    overflow: hidden; }
    .present .present__slider .present__list .present__item {
      float: left;
      width: 25%;
      text-align: center;
      background: url(../picture/present__list.png) 50% 0 no-repeat;
      padding: 0 15px;
      margin: 0 -15px; }
      .present .present__slider .present__list .present__item p {
        color: #97dfff;
        font-size: 13px;
        margin: 12px; }

Но хочется получить без вложенностей, такого рода:

.present {
  background: red; }
  .present__slider {
    height: 310px;
    overflow: hidden; }
    .present__item {
      float: left;
      width: 25%;
      text-align: center;
      background: url(../picture/present__list.png) 50% 0 no-repeat;
      padding: 0 15px;
      margin: 0 -15px; }
      .present__item p {
        color: #97dfff;
        font-size: 13px;
        margin: 12px; }