1
\$\begingroup\$

Need help with DRYing out my Sass... there is just so much repetition in here:

.cta_foo {      @include linear-gradient(#f69c28,#b75d00,#b75d00); text-shadow: -1px -1px 0 #b85e00;
    &:hover {   @include linear-gradient(#FFAC41,#E77500,#E77500); } }
.cta_bar {      @include linear-gradient(#17b629,#0e831c,#0e831c); text-shadow: -1px -1px 0 #008A0F;
    &:hover {   @include linear-gradient(#25CF39,#179F27,#179F27); } }
.cta_baz {      @include linear-gradient(#67a9e4,#3a7ab2,#3a7ab2); text-shadow: -1px -1px 0 #4477a5;
    &:hover {   @include linear-gradient(#72B4EF,#448BCA,#448BCA); } }

I started out with an @each directive but just got confused quickly. I ask not just for this one instance but because I'm trying to wrap my head around maps and lists and loops and such.

Update

@mixin linear-gradient just generates a linear-gradient with fallback color:

@mixin linear-gradient($start,$end,$fallback) {
    background-color: $fallback; background-image: linear-gradient($start,$end);
    @include ms-filter($start,$end);
}
\$\endgroup\$
1
\$\begingroup\$

Well I finally figured out a way to do what I had in my mind:

@each $a, $b, $c, $d in (
    (foo,   (#f69c28,#b75d00,#b75d00), #b85e00, (#FFAC41,#E77500,#E77500)),
    (bar,   (#FFAC41,#E77500,#E77500), #008A0F, (#25CF39,#179F27,#179F27)),
    (baz,   (#67a9e4,#3a7ab2,#3a7ab2), #4477a5, (#72B4EF,#448BCA,#448BCA))
    ) {
    .foo_#{$a} {
        @include linear-gradient(nth($b,1),nth($b,2),nth($b,3)); text-shadow: -1px -1px 0 $c;
        &:hover { @include linear-gradient(nth($d,1),nth($d,2),nth($d,3)); }
    }
}

But really it doesn't look like it's any clearer (likely it's worse) and it only dropped from 493 characters to 420. I guess my intention, though, was just knowing HOW to do it. Perhaps this is one case where I don't need to be DRY if it makes the code harder to understand.

\$\endgroup\$
  • \$\begingroup\$ But you still repeat colors twice in each row, if you get rid of that it will be even shorter. And maybe you could compile the lighter or darker shade with colour functions instead? \$\endgroup\$ – ferada Feb 12 '15 at 18:03
  • 1
    \$\begingroup\$ Well that won't always be the case (that the fallback color and end color are the same), as sometimes I'll have fallbacks that may not even use either. Stupid WCAG2.0 requires 4.5 contrast ratio and I might have a light colored background necessitating dark text and have to get creative to pass accessibility tests. Neither here nor there, but thanks for pointing that out anyways. \$\endgroup\$ – Phil Tune Feb 12 '15 at 19:43
  • \$\begingroup\$ Ultimately, I don't like this solution because it makes the code even HARDER to read, and the current solution isn't terrible by itself. But it WAS an answer to what I initially was looking for. \$\endgroup\$ – Phil Tune Feb 12 '15 at 19:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.