伪类嵌套/ SCSS Linter Warning

我对SCSS比较陌生，试图用棉绒提高我的技能。我有这个小例子，我只想在父菜单项悬停的情况下显示子菜单。当这段代码正在工作时，linter给了我一个“类应该嵌套在它的父类伪类中”。伪类嵌套/ SCSS Linter Warning

.menu-item { 
 
    .submenu { 
 
    display: none; 
 
    } 
 

 
    &:hover .submenu { 
 
    display: block; 
 
    } 
 
}

<ul> 
 
    <li class='menu-item'> 
 
    <a href=''> 
 
     Menu 1 
 
    </a> 
 
    <ul class='submenu'> 
 
     <li>Submenu 1.1</li> 
 
     <li>Submenu 1.2</li> 
 
    </ul> 
 
    </li> 
 
</ul>

我不知道该怎么办：悬停部分可以被嵌套到.submenu部分。你能帮我吗？

来源

2016-12-30 rcvd

我意见是，棉绒是别人的意见，因此既不是棉花也不是这个评论问题;） –

代码看起来非常好。你在使用SASS代码时编译了吗？ – aavrug

代码按预期工作。我只是想知道嵌套是否可以改进。 – rcvd

您的SASS代码将被编译为以下可以正常工作的CSS代码。只要确保您的SASS代码正确编译为CSS。

.menu-item .submenu { 
 
    display: none; 
 
} 
 

 
.menu-item:hover .submenu { 
 
    display: block; 
 
}

<ul> 
 
    <li class='menu-item'> 
 
    <a href=''> 
 
     Menu 1 
 
    </a> 
 
    <ul class='submenu'> 
 
     <li>Submenu 1.1</li> 
 
     <li>Submenu 1.2</li> 
 
    </ul> 
 
    </li> 
 
</ul>

来源

2016-12-30 10:34:54 aavrug

我知道它编译正确，但我认为可以将悬停部分以某种方式嵌套到.submenu部分。但我不知道如何选择这样做的父母 - 父母元素： – rcvd

我没有明白你的观点。 – aavrug

我不关心编译后的CSS，而是关于sass文件。因为linter说它应该嵌套，我试图找出，如何。 – rcvd

我找到了解决方案，它是如此简单，我不得不窝.submenu进入悬停部分:(

.menu-item { 
 
    .submenu { 
 
    display: none; 
 
    } 
 

 
    &:hover { 
 
    .submenu { 
 
     display: block; 
 
    } 
 
    } 
 
}

<ul> 
 
    <li class='menu-item'> 
 
    <a href=''> 
 
     Menu 1 
 
    </a> 
 
    <ul class='submenu'> 
 
     <li>Submenu 1.1</li> 
 
     <li>Submenu 1.2</li> 
 
    </ul> 
 
    </li> 
 
</ul>

来源

2016-12-30 11:01:03 rcvd

伪类嵌套/ SCSS Linter Warning

回答

相关问题