Мобильная версияМиксин SCSS не работает для дочернего селектора ⇐ CSS
-
Гость
Миксин SCSS не работает для дочернего селектора
Я хочу добавить миксин запроса @media к дочернему селектору с помощью @include. Однако он не компилируется в CSS. Я использую VSCode, и он не выдает никаких ошибок, он просто не работает. Ниже представлена таблица родительских стилей .grid с соответствующими дочерними элементами
@use "../util" как u; .сетка { дисплей: сетка; столбцы-шаблона сетки: 1fr; сетки-шаблона-строки: авто авто; разрыв: 40 пикселей; отступ слева: 7%; отступ справа: 7%; максимальная ширина: 1000 пикселей; Маржа-встроенная: авто; @include u.breakpoints-up(большой) { столбцы шаблона сетки: 2fr 1fr; строки-шаблона сетки: авто; отступ слева: 0%; отступ справа: 0%; } &__основной, &__сайдбар { отступ: 40 пикселей; } &__основной { цвет фона: hsl(301, 36%, 69%); } &__сайдбар { //Управляет выравниванием для мобильного просмотра цвет фона: hsl(223, 39%, 23%); @include u.breakpoints-down(medium) { выравнивание текста: по центру; } } } На странице есть два столбца: __main и __sidebar. Я хочу, чтобы __sidebar центрировал текст, когда он достигает определенной максимальной ширины. Я проверил код и проверил наличие проблем с перекрытием/каскадом, но все выглядит нормально. Миксины работают, так как я использовал их для представления рабочего стола по умолчанию. Кажется, проблема в дочерних селекторах. Ниже приведен мой лист _breakpoint.
$breakpoints-up: ( «средний»: 43,75эм, «большой»: 56,25эм, «xlarge»: 90em, ); $breakpoints-down: ( «маленький»: 43,7485эм, «средний»: 56.24875em, «большой»: 89.99875em, ); @mixin точки останова-up($size) { @media (минимальная ширина: map-get($breakpoints-up, $size)) { @содержание; } } @mixinbreakpoints-down($size) { @media (максимальная ширина: map-get($breakpoints-down, $size)) { @содержание; } } Отредактировано, чтобы добавить: я переместил миксин из папки UTIL в файл _breakpoint, и миксин работает. Не могут ли дочерние селекторы найти внешние миксины, потому что они вложенные? Есть ли способ обойти это? Если я не использую миксин несколько раз в одном и том же файле, в этом сценарии он бесполезен.
Отредактируйте, чтобы добавить: после удаления миксина из дочернего селектора и устранения неполадок с помощью описанных выше шагов я переместил миксин UTIL НАЗАД в дочерний селектор, и теперь он работает? Я искал неполадки в течение нескольких дней, и до сих пор ничего не помогло. Оставим это на случай, если кто-то еще столкнется с той же проблемой, если не указано иное.
Я хочу добавить миксин запроса @media к дочернему селектору с помощью @include. Однако он не компилируется в CSS. Я использую VSCode, и он не выдает никаких ошибок, он просто не работает. Ниже представлена таблица родительских стилей .grid с соответствующими дочерними элементами
@use "../util" как u; .сетка { дисплей: сетка; столбцы-шаблона сетки: 1fr; сетки-шаблона-строки: авто авто; разрыв: 40 пикселей; отступ слева: 7%; отступ справа: 7%; максимальная ширина: 1000 пикселей; Маржа-встроенная: авто; @include u.breakpoints-up(большой) { столбцы шаблона сетки: 2fr 1fr; строки-шаблона сетки: авто; отступ слева: 0%; отступ справа: 0%; } &__основной, &__сайдбар { отступ: 40 пикселей; } &__основной { цвет фона: hsl(301, 36%, 69%); } &__сайдбар { //Управляет выравниванием для мобильного просмотра цвет фона: hsl(223, 39%, 23%); @include u.breakpoints-down(medium) { выравнивание текста: по центру; } } } На странице есть два столбца: __main и __sidebar. Я хочу, чтобы __sidebar центрировал текст, когда он достигает определенной максимальной ширины. Я проверил код и проверил наличие проблем с перекрытием/каскадом, но все выглядит нормально. Миксины работают, так как я использовал их для представления рабочего стола по умолчанию. Кажется, проблема в дочерних селекторах. Ниже приведен мой лист _breakpoint.
$breakpoints-up: ( «средний»: 43,75эм, «большой»: 56,25эм, «xlarge»: 90em, ); $breakpoints-down: ( «маленький»: 43,7485эм, «средний»: 56.24875em, «большой»: 89.99875em, ); @mixin точки останова-up($size) { @media (минимальная ширина: map-get($breakpoints-up, $size)) { @содержание; } } @mixinbreakpoints-down($size) { @media (максимальная ширина: map-get($breakpoints-down, $size)) { @содержание; } } Отредактировано, чтобы добавить: я переместил миксин из папки UTIL в файл _breakpoint, и миксин работает. Не могут ли дочерние селекторы найти внешние миксины, потому что они вложенные? Есть ли способ обойти это? Если я не использую миксин несколько раз в одном и том же файле, в этом сценарии он бесполезен.
Отредактируйте, чтобы добавить: после удаления миксина из дочернего селектора и устранения неполадок с помощью описанных выше шагов я переместил миксин UTIL НАЗАД в дочерний селектор, и теперь он работает? Я искал неполадки в течение нескольких дней, и до сих пор ничего не помогло. Оставим это на случай, если кто-то еще столкнется с той же проблемой, если не указано иное.
