Question

我无法在所需位置添加＆amp;：hover到我的SCSS代码中。

基本上我有一个非常简单的菜单，每个LI都有一个班级。基本上我编写的以下代码将在每个类上正确分配所需的样式，尽管我只希望这只是一个悬停事件。

以下是代码

$menu-style: black #000, blue #6699ff;

.top-bar-section {
    @each $menu-color in $menu-style {
        ul li .#{nth($menu-color, 1)} {
            border-top:5px solid nth($menu-color, 2);
        }
    }
}

以下是处理成CSS时生成的内容

.top-bar-section ul li .black {
  border-top: 5px solid black;
}

.top-bar-section ul li .blue {
  border-top: 5px solid #6699ff;
}

这是我想要的结果，我需要完成

.top-bar-section ul li.black:hover, .top-bar-section ul li.black.active {
  border-top: 5px solid #333;
}

etc....

看到问题吧？ = [。当我加入＆amp;：hover时，它尖叫着我必须在复合选择器的开头说明......

有什么想法吗？

Answer 1

我不确定你在哪里添加:hover，但它似乎对我有用。

$menu-style: black #000, blue #6699ff;

.top-bar-section {
    @each $menu-color in $menu-style {
        ul li.#{nth($menu-color, 1)}:hover {
            border-top:5px solid nth($menu-color, 2);
        }
    }
}

输出：

.top-bar-section ul li.black:hover {
  border-top: 5px solid black;
}

.top-bar-section ul li.blue:hover {
  border-top: 5px solid #6699ff;
}

指南针/ SCSS @each与第n个函数

1 个答案: