Блог

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

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

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

 div#top-level
  declarations: ...
  div.inside
    declarations: ...
    amp;: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 отступ — это все.

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

Именно так я обычно пишу псевдоэлементы :first-child , :last-child и :nth-child(n) в sass

 .my-class {
    amp;:first-child {
       // your css code             
    }

    amp;:last-child {
       // your css code             
    }

    amp;:nth-child(2) {
       // your css code             
    }
}
  

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

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

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

— смотрите пример канала с разделителем.

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