sass - Sass 多态导航栏问题

Question

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

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

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

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

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

score 1 · Accepted Answer

这里有很多需要改进的地方：

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

假设您的每个导航<li>元素都需要它，请使用迭代的 mixin 将其干燥：

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

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

score -1 · Accepted Answer

你有错}之后@include nav-button('dashboard');

试试看：

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

sass - Sass 多态导航栏问题

2 回答 2

Related

Reference