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

Вот мой код:

.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
        }
    }
}

Почему избегаете второго ответа? Чтобы ответить на ваш вопрос в заголовке, рассматривали ли вы возможность использования комбинации селекторов :not(:first)?

Wimanicesir 28.01.2019 11:27
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
1
145
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

.grid {
    > li {
        color: #fff;

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

    }
}

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

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

Другие вопросы по теме