#sass #quasar-framework
Вопрос:
Я новичок в scss и не могу понять, где мой код пошел не так. Каким-то образом он не может обнаружить дочерний элемент моего вложенного scss. Но если я выведу его из родительского класса, код будет работать хорошо. Я также использую фреймворк quasar.
Это мой SCSS:
.header {
background: #EFEEF2;
height: 60px;
display: flex;
flex-wrap: wrap;
justify-content: right;
.menu-icon { // my code only detects up to here
margin-top: 20px;
margin-right: 30px;
.q-icon:before { // code doesn't detect this either
font-size: 14px;
}
}
.floating-menu {
background: white;
border-radius:10px;
box-shadow:5px 10px 6px rgba(0,0,0,0.24);
.text-account {
font-size: 12px;
color: #333C52;
}
.text-profile-logout {
color: #333C52;
font-size: 16px;
}
}
}
Извините, я не очень хорошо объясняю по-английски, поэтому я воссоздал свой код здесь
Комментарии:
1. Если вы проверите свой код, вы увидите, что
.q-icon
класс, который он применил к тому же элементу,.menu-icon
что и вложенность, здесь ничего не сделает..floating-menu
Класс, похоже, нигде не применяется (и меню в любом случае находится за пределами заголовка в DOM).2. @Arkellys У меня есть класс с плавающим меню, примененный к моему элементу q-меню под значком q
3. Да, но этого нигде нет в доме. Вы должны проверить свой код, когда у вас возникнут подобные проблемы. Также проверьте это: github.com/quasarframework/quasar/issues/4553
Ответ №1:
Я решил эту проблему, контролируя область действия. Это статья, на которой я основывался: Использование Sass для управления областью действия с помощью именования BEM
мой окончательный код:
const app = Vue.createApp({})
app.use(Quasar, { config: {} })
app.mount('#q-app')
new Vue({
el: '#q-app',
data () {
return {
hover:false
}
}
})
.header{
background: #EFEEF2;
height: 51.48px;
display: flex;
flex-wrap: wrap;
justify-content: right;
amp;__menu-icon{
color: #A7A7A7;
margin-top: 20px;
margin-right: 30px;
}
amp;__floating-menu{
background: red;
border-radius:10px;
box-shadow:5px 10px 6px rgba(0,0,0,0.24);
.text-account{
font-size: 12px;
color: #333C52;
}
.text-profile-logout{
color: #333C52;
font-size: 16px;
}
}
}
<div id="q-app">
<div class="q-gutter-md" style="max-width: 500px">
<div class="q-gutter-md header">
<q-icon
flat
@mouseover="hover = true"
name="menu" class="header__menu-icon">
<q-menu
v-model="hover"
@mouseleave="hover = false"
class="header__floating-menu" auto-close>
<q-item>
<q-item-section class="text-account">Account</q-item-section>
</q-item>
<q-list style="min-width: 150px">
<q-item clickable>
<q-item-section class="text-profile-logout">My Profile</q-item-section>
</q-item>
<q-item clickable>
<q-item-section class="text-profile-logout">Logout</q-item-section>
</q-item>
</q-list>
</q-menu>
</div>
</div>
</div>