sass - SCSS 嵌套:无法检测到子类/不起作用
问题描述
我是 scss 的新手,我不知道我的代码哪里出错了。不知何故,它无法检测到我嵌套的 scss 的孩子。但是如果我把它放在父类之外,代码就会很好地工作。我也在使用类星体框架。
这是我的 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;
}
}
}
对不起,我不太擅长用英语解释,所以我在这里重新创建了我的代码
解决方案
我通过控制范围解决了这个问题。这是我基于的文章:Using Sass to Control Scope With BEM Naming
我的最终代码:
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;
&__menu-icon{
color: #A7A7A7;
margin-top: 20px;
margin-right: 30px;
}
&__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>
推荐阅读
- git - Jenkins 多分支管道缺乏对 PathRestriction 触发器的支持
- tensorflow - 整页文本识别数据集创建
- javascript - 如何在 jquery 确认为已定义后运行内联脚本
- firebase - AngularFire 存储获取文件 url
- r - 难以在 R 中导入具有多个不同分隔符的文本文件
- excel - 使用带有条件的 Excel 对象
- spring - 如何通过 Spring WebFlux 中的处理程序方法拦截请求
- angular - 如何使用主题在 Angular 6 中共享全局数据
- r - 将行值乘以 R 中的所有先前行值
- datastax-enterprise - Datastax Studio 无法读取图形的架构