Номер приращения SASS SCSS для атрибута данных

У меня есть цикл for в sass

@for $i from 1 through 7 {
    .m0#{$i}{
        a[aria-current = "page"]{
        background-color: nth($m_col_lvl_04, $i);
        }
        a[data-submenu-id = "submenu-id_p#{$i}"]{
            background-color: nth($m_col_lvl_04, $i);
        }
    }
}

Часть aria-current = "page" работает и добавляет правильные цвета.

Вторая часть не работает, потому что я не могу понять, как добавить приращение к атрибуту данных. [data-submenu-id = "submenu-id_p0X"], где X = 1-7

Я использовал это для увеличения числа изображения, поэтому должен быть способ. Это просто ускользает от меня :-)

Любая помощь приветствуется.

background: url("../img/icons/m0#{$i}-icon-important.png") no-repeat; 

Я пробовал ваш код, и он сработал

Ryuk Lee 20.04.2018 06:43

В вашем коде вы написали submenu-id_p#{$i}, но в вашем вопросе submenu-id_p0X. Я предполагаю, что проблема в том, что вам не хватает 0 в идентификаторе?

Sam Willis 20.04.2018 10:41

@SamWillis Я считаю, что вы правы, 0 отсутствует. Как я это пропустил. Спасибо.

Laurence L 21.04.2018 22:49
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
3
144
0

Другие вопросы по теме