Question

我有一个导航栏，其中按钮具有悬停状态，但也需要在其各自的页面上“活动”。由于此导航栏是包含的一部分，因此我决定通过body标签上的类来执行活动状态，如.dashboard .dashboard-button中所示。所以我有悬停和这个。

我试图用Sass / Compass找出最简化的方法。我创建了几个mixins：

@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：

<body class="dashboard">
<div id="nav">
    <ul>
    <li class="first dashboard"><a href="/index.php">Dashboard</a></li>
    <li class="challenges"><a href="/challenges.php">Challenges &amp; Teams</a></li>
    <li class="goals"><a href="/goals.php">Goals</a></li>
    <li class="activity"><a href="/my-activity.php">My Activity</a></li>
    <li class="destinations"><a href="/destinations.php">Destinations</a></li>
    <li class="fitness last"><a href="/fitness-resources.php">Fitness Resources</a></li>
</ul>
</div>

这看起来有点令人费解，我想知道是否有人有任何建议来简化这一点。

注意：我必须添加白色到白色渐变，因为当悬停在纯色背景上时，渐变悬停状态会导致闪光。

Answer 1

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

你真的在处理dashboard类的层次结构吗？例如，您目前正在编译为：
```
li.dashboard {
    ...
}
li .dashboard li.dashboard {
    ...
}
```
这似乎是错误的，或者至少结构不合理。也许你可以在这里简化一些事情。

假设您需要为每个导航<li>元素添加此元素，请使用迭代混合来干掉它：

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实际上并不是最好的方法。对于这种东西使用占位符而不是mixins，或者将两者结合起来。我会做这样的事情：

    %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);
        }
    }

比较这些的输出和可维护性，我认为你会发现这更精简！

Answer 2

}

之后您的错误@include nav-button('dashboard');

试一试：

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

Sass多状态导航栏问题

2 个答案: