Настройка вывода спрайтов Compass

У меня есть меню верхней панели (этона основе ЗурбаФонд):

Это SCSS:

.top-bar {
  .top-bar-section {
    ul {
      @import "menu-icons/*.png";
      @include all-menu-icons-sprites;
    }
  }
}

Теперь это делает то, что ожидалось, но проблема в том, что я хочу стилизоватьa элемент внутри каждогоli элементы (на самом деле, яя хотел бы применить его к.top-bar.topbar-section.ul.li.a:before).

Тем не менее, поскольку сайт построен на WordPress, и поэтому меню, я могу только назначить класс для элемента li, и я не знаю, как сделать CompassСпрайтовая работа.

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

 Andrea Sciamanna30 июл. 2013 г., 11:04
На самом деле это не такая уж большая проблема, если вы начинаете с нуля. Ты неЕсли вы знаете, как создать тему, вам не нужны учебники: просто создайте проект компаса, включая фундамент.
 robertwbradford30 июл. 2013 г., 00:56
Как вы получили Foundation и SASS, работающие в вашей теме WordPress? Я'Я пытаюсь сделать то же самое. Есть ли учебник или ресурс, который вы использовали, который объясняет настройку? (Извините, это касается вашего исходного вопроса.)

Ответы на вопрос(1)

Решение Вопроса

которые нужно знать, когда вывод по умолчанию неименно то, что вы хотите:

Спрайт-URLСпрайт-позицииспрайт-имена (Без документов)

Используя их, вы можете применять стили спрайта к потомкамli элементы:

.top-bar .top-bar-section ul > li {
    // Generate the sprite map.
    $menu-icons-sprite-map: sprite-map("menu-icons/*.png", $layout: smart);

    // Set the background image.
    > a:before {
        background: sprite-url($menu-icons-sprite-map) 0 0 no-repeat;
    }

    // Set the background position for each sprite.
    $menu-icons-sprite-names: sprite-names($menu-icons-sprite-map);
    @each $name in $menu-icons-sprite-names {
        &.menu-icons-#{$name} > a:before {
           background-position: sprite-position($menu-icons-sprite-map, $name);
        }
    }
}
 Russ Ferri17 июн. 2013 г., 14:59
Ах да, я забыл, что имя спрайта не включает в себя имя папки. Этот метод обеспечивает гораздо большую гибкость в соглашении об именах классов :)
 Andrea Sciamanna17 июн. 2013 г., 08:58
У меня были некоторые проблемы, чтобы заставить его работать, но в конце концов яя понял, что мне нужно поменять последний селектор на&.menu-icons-#{$name} > a:before, Спасибо, @ русс!

Ваш ответ на вопрос