0

Regarding the question, here's an example of what I'm trying to do but I have a feeling that interpolation with SASS doesn't work in outputting variable within a mixin using an argument.


    $red: #f00;

    @mixin color-accent-class($color) {
        .#{$color}-accent {
            color: $#{$color};
        }
    }

    @include color-accent-class(red);

Ultimately I'm trying to make the repetitive code below DRY so I'm not repeating myself all sloppy style and I'm wondering if it should be done with @function and/or @each or some other looping action with SASS. Thanks in advance for any guidance!


    $blue: #2a62a7;
    $red: #db0042;
    $purple: #5b3b9f;
    $orange: #f7911a;
    $light-blue: #46aeed;
    $green: #49b842;


    @mixin product-accent($color-name, $hexval) {

        .product-accent-#{$color-name} {

            img {
                border: {
                    left: {
                        style: solid;
                        width: 10px;
                        color: $hexval;
                    }
                }
            }
            h3, b {
                color: $hexval;
            }
            .button {
                @extend .button.#{$color-name};
            }
        }

    }

    @include product-accent(black, #000);
    @include product-accent(blue, $blue);
    @include product-accent(red, $red);
    @include product-accent(purple, $purple);
    @include product-accent(orange, $orange);
    @include product-accent(light-blue, $light-blue);
    @include product-accent(green, $green);

Brian Larson
  • 45
  • 1
  • 1
  • 8
  • Thank you very much Martin. Still learning SASS and I hadn't learned about lists and `nth()` yet. I'll post my own answer now and thanks again! – Brian Larson Feb 14 '14 at 16:15

1 Answers1

0

Big thanks to @martin-turjak for help with this. Using SASS lists, nth() and a @for loop is what did the trick. Please chime in if there's a cleaner way to do this.


    $color-names: black, blue, red, purple, orange, light-blue, green;
    $color-hexvals: #000, $blue, $red, $purple, $orange, $light-blue, $green;

    @for $i from 1 through length($color-names) {
        @include product-accent(nth($color-names, $i), nth($color-hexvals, $i));
    }

Brian Larson
  • 45
  • 1
  • 1
  • 8