Использование SASS & для нацеливания на второй класс родителя

Question

Вот мой код:

.grid {

    > li {

        // li styles

        .text & {

            // new li styles if .grid also has a class of .text
        }
    }
}

Это неправильно, кажется, работает, только если я нацеливаюсь на что-то выше .grid, но я хочу иметь возможность нацелиться на .grid.text li {}, чтобы я могизменить стили li в зависимости от того, есть ли у .grid дополнительный класс, независимо от того, что внутри .grid.Возможно ли это?

Я пытаюсь избежать этого:

.grid {

    > li {

        // li styles
    }

    &.text {

        li {

            // new li styles
        }
    }
}

Answer 1

Вы можете сделать это, используя директиву @at-root , одновременно управляя вложенными правилами

, например, этот фрагмент

.grid {
    > li {
        color: #fff;

        @at-root {
          .text#{&}  {
              color: #000;
          }
        }

    }
}

на SASS >= 3.3 компилируется в

.grid > li {
  color: #fff;
}
.text.grid > li {
  color: #000;
}

---