Использование условий

По умолчанию @at-root изымает только селекторы. Тем не менее, @at-root можно использовать и для изъятия селекторов, вложенных в директивы, таких как @media. Например:

@media print {
  .page {
    width: 8in;

    @at-root (without: media) {
      color: red;
    }
  }
}

@media print
  .page
    width: 8in

    @at-root (without: media)
      color: red

@media print {
  .page {
    width: 8in;
  }
}

.page {
  color: red;
}

Вы можете использовать @at-root (without: ...) для изъятия из любой директивы. Также вы можете изымать селекторы сразу из нескольких директив, просто разделив их пробелами: @at-root (without: media supports) изымет элементы из запросов @media и @supports.

Существует два специальных значения у @at-root, которые вы также можете использовать. "rule" относится к обычным правилам CSS.

• Команда @at-root (without: rule) имеет такое же значение, как и @at-root без запросов.
• Команда @at-root (without: all) обозначает, что стили должны быть изъяты из всех директив и правил CSS.

Если вы хотите указать какие директивы или правила включать, а не список тех, которые должны быть изъяты, то вы можете использовать with вместо without. Например, команда @at-root (with: rule) означает, что необходимо изъять элементы из всех директив, но не затрагивать вложенные правила CSS.