Sass多狀態導航欄問題

我有一個導航欄，其中按鈕具有懸停狀態，但也需要在其各自的頁面上處於「活動」狀態。由於此導航欄是包含的一部分，因此我決定通過body標籤上的類來執行活動狀態，如.dashboard .dashboard-button。所以我有這個懸停。Sass多狀態導航欄問題

我試圖找出最簡單的方法來做到這一點與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 { 
&.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>

這似乎有點令人費解，我想知道是否有人有任何建議來簡化這一切。

注：我不得不添加白色到白色的漸變，因爲當將鼠標懸停在具有漸變懸停狀態的純色背景上時會導致閃光。

來源

2012-11-03 Steve

我們可以看到你的html標記嗎？ – bookcasey

加入問題 – Steve

如何在評論中獲得格式化的縮進代碼？ – Steve

有許多的事情，以改善這裏：

你真的處理的該層次結構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實際上不是最好的辦法。使用佔位符而不是混合這種東西，或將兩者結合起來。我會做這樣的事情：

%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-04 20:53:21 glortho

謝謝。我最終想要得到的是'.dashboard li.dashboard'，因爲當在頁面上顯示'body class =「dashboard」'時，具有相同類的li應該是「on」，以及「開啓「時懸停在任何其他頁面上。偉大的建議，我會嘗試。 – Steve

這個設置是天才。正如我上面所說的，我還需要將懸停狀態作爲正常狀態，當給定的LI位於具有相同類的BODY中時，所以我編輯了循環，如下所示：http://pastebin.com/uWcr6gGy是否這樣做對你有意義嗎？ – Steve

您需要將body.dashboard放在li選擇器之外。請參閱我編輯的＃3以獲取簡化版本。 – glortho

-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-03 17:26:42 Duke

謝謝，可能是複製並粘貼到這個論壇做到了。我的代碼工作正常，我問是否有人對簡化它的意見。 – Steve

Sass多狀態導航欄問題

回答

相關問題