Блог

Главная - Вопросы по программированию - Вложенность SCSS: дочерний класс не может быть обнаружен/не работает

Вложенность SCSS: дочерний класс не может быть обнаружен/не работает

#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>
Метки: