Могу ли я использовать амперсанд в SASS для ссылки на определенные теги с родительским классом?

У меня есть класс semantic, который я применяю к множеству разных элементов. В зависимости от того, к какому тегу html применяется класс, я бы хотел, чтобы он применял другой стиль. Вот как я пытался это сделать:

.semantic {
    &ul {
        padding: 0;
        margin: 0;
    }
    &p {
        margin: 0;
    }
}

Это не работает. Конечно, я мог бы написать это так, но это было бы не очень "СУХОЙ":

 .semantic ul {
    padding: 0;
    margin: 0;
 }

 .semantic p {
     margin: 0;
 }

Возможно ли это?

Изменить: для пояснения, вот пример того, как выглядит мой HTML:

<ul class='semantic'>
    <li>An Item</li>
</ul>

<p class='semantic'>This text is semantically a paragraph, but should not be displayed as such</p>

Ответы

Ответ 1

То, что вы хотите, в теории выглядело бы так:

.semantic {
    ul& {
        padding: 0;
        margin: 0;
    }
    p& {
        margin: 0;
    }
}

Это невозможно, потому что & должен быть первым. Вам просто придется иметь дело с тем, что это не СУХОЙ и написать его вручную:

ul.semantic {
    padding: 0;
    margin: 0;
}

p.semantic {
    margin: 0;
}

Как и в случае с Sass 3.3 или 3.4, можно использовать этот синтаксис:

.semantic {
    ul#{&} {
        padding: 0;
        margin: 0;
    }
    p#{&} {
        margin: 0;
    }
}

Ответ 2

В Sass 3.4:

.semantic {
    @at-root {
      ul#{&} {
        padding: 0;
        margin: 0;
      }
      p#{&} {
        margin: 0;
      }
    }
}

Формирует:

ul.semantic {
  padding: 0;
  margin: 0;
}

p.semantic {
  margin: 0;
}

@at-root перемещает блок на верхний уровень. Это имеет несколько применений (см. Ссылку), но здесь используется для использования синтаксиса &, не подразумевая, что правила являются дочерними селекторами .semantic.

Ответ 3

Из-за того, как работает CSS-специфика, вы можете просто сделать это:

.semantic {
  margin: 0; 
}

ul.semantic {
  padding: 0;
}

В вашем HTML p.semantic и ul.semantic будет margin: 0;, и только ul.semantic будет иметь padding: 0;

Меньше Sass, меньше CSS. DRY.

Если, в отличие от вашего примера, элементы на реальном сайте имеют еще меньше общего, вам может потребоваться переосмыслить, почему они должны иметь одно и то же имя класса.

Ответ 4

Не совсем понятно, какая у вас структура HTML.

Если это так:

<div class="semantic">
  <p>...</p>
  <ul>...</ul>
</div>

... тогда вам нужны классы типа .semantic ul и .semantic p. Здесь соответствующий SCSS:

.semantic {

    & ul {
        padding: 0;
        margin:  0; }

    & p {
        margin:  0; } }

Если структура HTML выглядит так:

<p class="semantic">...</p>
<ul class="semantic">...</ul>

... тогда вам нужны классы типа .semantic ul и .semantic p. Вы должны слушать книжный шкаф. Здесь нахальный вариант его СУХОЙ идеи:

.semantic {
  padding: 0;
  margin:  0; }

p.semantic {
  margin:  0; }