Sass多状态导航栏问题

我有一个导航栏，其中的按钮有一个悬停状态，但也需要在各自的页面上处于“活动”状态。因为这个导航栏是include的一部分，所以我决定通过body标记上的类来执行活动状态，如

.dashboard.dashboard按钮中所示。我有悬停和这个

我试图找出使用Sass/Compass实现这一点的最简化的方法。我创建了几个混合器：

@mixin nav-button-on($icon) {
    background-color: #2f3684; // Old browsers
    @include filter-gradient($offwhite, #E5E5E5, vertical); // IE6-9
    @include background-image(url('../images/'+$icon+'-on.png'),linear-gradient(top, $offwhite 0%, #E5E5E5 100%));
    border-bottom: $borderbottom solid #F31A35;
    a { color: $red;}
}
@mixin nav-button($icon){
    background-color: #fff; // Old browsers
    @include filter-gradient(#fff, #fff, vertical); // IE6-9
    @include background-image(url('../images/'+$icon+'.png'),linear-gradient(top, #fff 0%, #fff 100%));
}

然后在定义按钮的LI中，我有

 li {
 &.dashboard { 
            @include nav-button('dashboard'); 
        }
        .dashboard &.dashboard { 
            @include nav-button-on('dashboard'); 
            &:hover {
                 @include nav-button-on('dashboard'); 
            }
        }
}

HTML:











这似乎有点复杂，我想知道是否有人有任何建议来简化这一切

注意：我必须添加白色到白色的渐变，因为当在带有渐变悬停状态的纯色背景上悬停时，会导致闪光。
在
@包括导航按钮（“仪表板”）之后，您有一个错误的
}

试试看：

li {  
    &.dashboard {   
        @include nav-button('dashboard');  
        .dashboard &.dashboard {   
            @include nav-button-on('dashboard');     
            &:hover {  
                @include nav-button-on('dashboard');   
            }  
        }  
    }  
}

这里有许多地方需要改进：

您真的在处理
仪表板
类的层次结构吗？例如，您当前正在编译为：

li.dashboard {
    ...
}
li .dashboard li.dashboard {
    ...
}

这似乎是错误的，或者至少是结构不良。也许你可以简化这里的事情

假设您的每个nav
元素都需要它，请使用迭代混音将其干燥：

li {
    @each $item in dashboard, challenges, goals, activity, destinations, fitness {
        &.#{$item} { 
            @include nav-button($item); 
        }
        .#{$item} &.#{$item} { 
            @include nav-button-on($item); 
            &:hover {
                @include nav-button-on($item); 
            }
        }
    }
}


但是#2实际上并不是最好的方式。对这类内容使用占位符而不是混合符，或者将两者结合起来。我会这样做：

    %nav-button {
        background-color: #fff; // Old browsers
        @include filter-gradient(#fff, #fff, vertical); // IE6-9
    }

    %nav-button-on {
        background-color: #2f3684; // Old browsers
        @include filter-gradient($offwhite, #E5E5E5, vertical); // IE6-9
        border-bottom: $borderbottom solid #F31A35;
        a { color: $red;}
    }

    @mixin li-image($icon) {
        @include background-image(url('../images/'+$icon+'.png'),linear-gradient(top, #fff 0%, #fff 100%));
    }

    @mixin li-image-on($icon) {
        @include background-image(url('../images/'+$icon+'-on.png'),linear-gradient(top, $offwhite 0%, #E5E5E5 100%));
    }

    @each $item in dashboard, challenges, goals, activity, destinations, fitness {
        body.#{$item} li, li.#{$item}:hover {
            @extend %nav-button-on;
            @include li-image-on($item);
        }
        li.#{$item} {
            @extend %nav-button;
            @include li-image($item);
        }
    }


比较这些产品的输出和可维护性，我认为您会发现它更加精简
 谢谢，可能是复制粘贴到这个论坛上的结果。我的代码运行得很好，我在问是否有人对简化它有意见。如何在注释中格式化、缩进代码？你没有。除了一个简短的片段外，任何内容都应该添加到您的答案中。谢谢。我最终想要得到的是
.dashboard li.dashboard
，因为当在带有
body class=“dashboard”
的页面上显示时，具有相同类的li应该是“开”的，当悬停在任何其他页面上时，也应该是“开”的。很好的建议，我会试试。这个设置真是天才。正如我上面所说，当给定的LI位于具有相同类的实体内时，我还需要将悬停状态设置为正常状态，因此我对循环进行了如下编辑：这对您有意义吗？您需要将BODY.dashboard置于LI选择器之外。有关简化版本，请参见上面我编辑的#3。
    %nav-button {
        background-color: #fff; // Old browsers
        @include filter-gradient(#fff, #fff, vertical); // IE6-9
    }

    %nav-button-on {
        background-color: #2f3684; // Old browsers
        @include filter-gradient($offwhite, #E5E5E5, vertical); // IE6-9
        border-bottom: $borderbottom solid #F31A35;
        a { color: $red;}
    }

    @mixin li-image($icon) {
        @include background-image(url('../images/'+$icon+'.png'),linear-gradient(top, #fff 0%, #fff 100%));
    }

    @mixin li-image-on($icon) {
        @include background-image(url('../images/'+$icon+'-on.png'),linear-gradient(top, $offwhite 0%, #E5E5E5 100%));
    }

    @each $item in dashboard, challenges, goals, activity, destinations, fitness {
        body.#{$item} li, li.#{$item}:hover {
            @extend %nav-button-on;
            @include li-image-on($item);
        }
        li.#{$item} {
            @extend %nav-button;
            @include li-image($item);
        }
    }