SCSS 嵌套：child class 不能 detected/doesn 不工作

Question

我是 scss 的新手，我不知道我的代码哪里出了问题。不知何故，它无法检测到我的嵌套 scss 的 child。但是如果我把它放在 parent class 之外，代码就可以正常工作。我也在用类星体框架。

这是我的 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;
        }
    }
}

抱歉，我的英语解释不是很好，所以我重新创建了我的代码 here

Answer 1

我通过控制作用域解决了这个问题。这是我基于的文章：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>

SCSS 嵌套：child class 不能 detected/doesn 不工作

SCSS nesting: child class can't be detected/doesn't work

sass

quasar-framework