sass: первый ребенок не работает

Question

Я давно не использую SASS и хотел узнать, есть ли какие-то проблемы с псевдоэлементами, такими как :first-child или :last-child?

Answer 1

Хотя @Andre правильно, что существуют проблемы с псевдоэлементами и их поддержкой, особенно в старых (IE) браузерах, эта поддержка постоянно улучшается.

Что касается вашего вопроса о том, есть ли какие-либо проблемы, я бы сказал, что на самом деле я их не видел, хотя синтаксис для псевдоэлемента может быть немного сложным, особенно при первом его рассмотрении. Итак:

div#top-level
  declarations: ...
  div.inside
    declarations: ...
    &:first-child
      declarations: ...

, который компилируется, как и следовало ожидать:

div#top-level{
  declarations... }
div#top-level div.inside {
  declarations... }
div#top-level div.inside:first-child {
  declarations... }

Я не видел никакой документации по этому вопросу, за исключением утверждения, что "sass может делать все, что может делать css". Как всегда, с Haml и SASS отступ - это все.

Answer 2

Я думаю, что лучше (для моего опыта) использовать: :first-of-type, :nth-of-type(), :last-of-type.Это можно сделать с небольшим изменением правил, но я смог сделать гораздо больше, чем *-of-type, чем *-child селекторы.

Answer 3

Прежде всего, существуют браузеры, которые не поддерживают эти псевдоэлементы (то есть: first-child,: last-child), поэтому вы должны «разобраться» с этой проблемой.

Есть хороший пример, как заставить это работать без использования псевдоэлементов:

http://www.darowski.com/tracesofinspiration/2010/01/11/this-newbies-first-impressions-of-haml-and-sass/

- см. Пример разделительной трубы.

Надеюсь, это было полезно.