Question

我试图为一个构建为html列表的下拉菜单构建一个相当简单的Sass mixin

我的HTML是

<div class="parent">
   <div class="name">My Name</div>
   <ul>
     <li>profile</li>
     <li>logout</li>
</div>

然后我有一个应用于UL的mixin

@mixin dropdown() {
  // create a dropdown list from a ul

  position: absolute;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  &:hover {
    display: block;
  }
  li {
    padding: 0;
    background-color: red;
  }
  li a {
    @include button();
    padding-left: 0;
  }
}

然后我试图通过将mixin包含在父

中来简单地创建css

.parent {
        position: relative;
        ul {
            @include dropdown();
        }
        &:hover ul {
            display: block;
        }
    }

问题是，当我将鼠标悬停在父级上时，mixin需要设置ul { display:block}，因此css需要阅读.parent:hover ul {displa:block}但当然，我更愿意将其分配给父而不是在父本身上添加类。

我认为我应该可以* &:hover或.parent:hover &或类似的东西，但我尝试过的任何组合都无效。

使用.parent:hover &创建

的CSS

header .parent ul:hover, .parent:hover header .parent ul {
        display: block; }

哪个不对。

连连呢？不必指定父元素是首选。

Answer 1

最初我试图把mixin放在dropdown本身，但是由于@cimmanon指出我没有包括我如何使用mixin，我重新考虑了这个方法并重新创建了mixin到应用于父母，这很好，但有人可能有更好的方法。

.parent {
    @include dropdown();
}

@mixin dropdown() {
  display: relative;
  // create a dropdown list from a ul
  &:hover ul {
    display: block;
  }
  ul {
    position: absolute;
    display: none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    &:hover {
      display: block;
    }
}

Sass得到兄弟悬停状态下拉菜单

1 个答案: