Как в SASS сделать подобное ol > li?

Question

[Игорь Че]

У меня такая структура в HTML:
ol
--li
----ul
------li

Я хочу применить определенный стиль только к элементам ul > li, первого уровня. В простом CSS, я бы написал просто ul>li: margin: 10px 0;
А как это сделать в SASS? При обычной древовидной структуре это свойство применяется ко всем дочерним li.

Answer 1

[VisualIdeas]

ol 
    & > li 
        & > ul 
            & > li 
                стили

Но вообще это очень плохой стиль написания стилей (сорри за тавтологию)
Читайте про БЭМ

Comments

[Игорь Че]

Спасибо большое. Работает.

[Игорь Че]

Только не понимаю что в этом плохого. Вы имеете ввиду что нужно задать свои классы для каждого типа элементов?

Answer 2

[zooks]

ol
  li
    ul
      & > li
        margin: 10px 0

Ну а вообще по-хорошему нужно назначать тегу ol класс.

.bulleted-menu
  li
    &-subclass
      li
        margin: 10px 0

<ol class="bulleted-menu">
  <li>
    <ul class="bulleted-menu-subclass">
      <li>
…

Comments

[Игорь Че]

Я честно говоря не вполне понимаю эту идею верстать задом наперед. Изначально ведь css и использовался для того чтобы на имеющийся html с его классами, писать нужные стили, и css3 это подтвержает, т.к. позволяет еще удобнее чем css2, разрешать неоднозначные ситуации и писать стили практически для любого html, с его классами, удобными или нет.
Потом появился Bootstrap и верстать стало принято наоборот, не в css, а в html.
Может дело в том что я практически не верстаю с нуля, а всегда на CMS, и переопределять в имеющихся шаблонах классы и ID тот еще гимор, гораздо быстрее в css всё прописать.

[zooks]

Игорь Че: я работаю с MODX и WP - переопределить классы в них довольно легко. Способ с > для списков тоже хорош, это раньше он категорически возбранялся. БЭМ гарантирует, что класс будет назначен только нужным тегам - это важно на средних и больших проектах. Также скорость рендеринга будет хоть немного, но быстрее.
Bootstrap лучше не упоминайте. Он слишком узконаправленный, хоть и позволяет вовлечь неокрепшие мозги в сферу фронтенда. Его практическое применение - формочки и простенькие админки.

[zooks]

Игорь Че: id сейчас используется только для якорей и JS. В стили его городить нельзя.

[Сергей Горячев]

zooks: Я тут недавно видел работу нашего младшего верстальщика, где весь шаблон построен на айдишниках. Попросил его переделать. Блин, он вручную сидел и переписывал каждый id на class, а потом еще в стилях # на . переделывал. Мне его даже жалко стало.

[zooks]

Sergey Goryachev: а мне жальче того, кому достанется сайт в работу после него :)

[Super Star]

Sergey Goryachev: мда уж. Возьмите меня я таких ошибок не делаю =)