0

ナビゲーションバーがあり、ボタンはホバー状態ですが、それぞれのページで「アクティブ」である必要があります。このナビゲーションバーはインクルードの一部であるため、のように、bodyタグのクラスを介してアクティブ状態を実行することにしました.dashboard .dashboard-button。だから私はホバーとこれを持っています。

私は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：

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

これは少し複雑に思えますが、これを合理化するためのアドバイスはないかと思いました。

注：グラデーションのホバー状態で単色の背景にカーソルを合わせるとフラッシュが発生するため、白から白へのグラデーションを追加する必要がありました。

4

2 に答える 2

1

ここで改善すべき点がいくつかあります。

  1. あなたは本当にそのdashboardクラスの階層を扱っていますか？たとえば、現在コンパイルしているのは次のとおりです。

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

    これは間違っているか、少なくとも構造が不十分なようです。おそらく、ここで物事を単純化することができます。

  2. 各ナビゲーション要素にこれが必要であると仮定<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); 
            }
        }
    }
}

  3. しかし、＃2は実際には最善の方法ではありません。この種のものにはミックスインではなくプレースホルダーを使用するか、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);
        }
    }

これらの出力と保守性を比較すると、これはかなり合理化されていることがわかると思います。

于 2012-11-04T20:53:21.903 に答える
-1

}あなたは後に間違っています@include nav-button('dashboard');

それを試してみてください：

li {  
    &.dashboard {   
        @include nav-button('dashboard');  
        .dashboard &.dashboard {   
            @include nav-button-on('dashboard');     
            &:hover {  
                @include nav-button-on('dashboard');   
            }  
        }  
    }  
}
于 2012-11-03T17:26:42.800 に答える