StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are a number of things to improve here:</p> <ol> <li><p>Are you really dealing with that hierarchy of <code>dashboard</code> classes? For example, you're currently compiling to:</p> <pre><code>li.dashboard { ... } li .dashboard li.dashboard { ... } </code></pre> <p>This seems wrong or at least poorly structured. Perhaps you could simplify things here.</p></li> <li><p>Assuming you need this for each of your nav <code><li></code> elements, DRY it up with an iterated mixin:</p> <pre><code>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); } } } } </code></pre></li> <li><p>But #2 is not actually the best way. Use placeholders rather than mixins for this kind of stuff, or combine the two. I'd do something like this:</p> <pre><code> %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); } } </code></pre></li> </ol> <p>Compare the outputs and maintainability of these and I think you'll find this quite a bit more streamlined!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload