0

Maybe I'm just too hung-up on PHP. Guilty as charged, if that's the case.

I have a set of variables I've named for WordPress categories that are important to my website. Each of these corresponds to an RGBA value like this:

// Category Styles:
$technology : rgba(91, 23, 102, 1);
$science    : rgba(186, 6, 38, 1);
$rochester  : rgba(224, 64, 28, 1);
$politics   : rgba(10, 82, 60, 1);
$journalism : rgba(224, 176, 11, 1);`

Now what I'd like to do is create a mixin that will automatically handle the largest part of the dirty work of applying these color styles to classes. This was my attempted solution:

@mixin category-backgrounds( $collection: ( 'science', 'technology', 'politics', 'rochester', 'journalism' ) ) {
@each $category in $collection {
    .bg-#{$category} {
        background-color: $#{$category};
    }
    .fg-#{$category} {
        color: $#{$category};
    }
}
}

I'm trying to substitute the value of the collection element for the name of a variable, in other words. I'll bet anything there's an easy way to go about this, but I'm new to SASS and Ruby.

In PHP, of course, I can validly say $$category, but here I cannot. That seems largely because the #{} interpolation puts quotation marks around the result. But is there a way to do this that I'm not seeing? Or an easier way altogether?

Thank you very much.

Asenar
  • 6,732
  • 3
  • 36
  • 49
Tom Belknap
  • 3
  • 1
  • 3
  • possible duplicate of [Sass @each variable interpolation](http://stackoverflow.com/questions/12970413/sass-each-variable-interpolation) – cimmanon Jan 20 '14 at 17:26

2 Answers2

3

Something like this should do it...

$categories: technology rgba(91, 23, 102, 1), science rgba(186, 6, 38, 1), rochester rgba(224, 64, 28, 1), politics rgba(10, 82, 60, 1), journalism rgba(224, 176, 11, 1);

@each $category in $categories {
    .bg-#{nth($category, 1)} {
        background-color: nth($category, 2);
    }

    .fg-#{nth($category, 1)} {
        color: nth($category, 2);
    }
}   

Compiles to:

.bg-technology {
  background-color: #5b1766;
}

.fg-technology {
  color: #5b1766;
}

.bg-science {
  background-color: #ba0626;
}

.fg-science {
  color: #ba0626;
}

.bg-rochester {
  background-color: #e0401c;
}

.fg-rochester {
  color: #e0401c;
}

.bg-politics {
  background-color: #0a523c;
}

.fg-politics {
  color: #0a523c;
}

.bg-journalism {
  background-color: #e0b00b;
}

.fg-journalism {
  color: #e0b00b;
}
brbcoding
  • 13,378
  • 2
  • 37
  • 51
0

The answer from @brbcoding will work great, but the new (3.3 — coming soon) version of Sass makes it even more clear by adding the "map" data-type. If you are able to start using the pre-release, I recommend it:

$categories: (
    technology : rgba(91, 23, 102, 1), 
    science    : rgba(186, 6, 38, 1), 
    rochester  : rgba(224, 64, 28, 1), 
    politics   : rgba(10, 82, 60, 1), 
    journalism : rgba(224, 176, 11, 1),
);

@each $category, $color in $categories {
    .bg-#{$category)} {
        background-color: $color;
    }

    .fg-#{$category} {
        color: $color;
    }
}  

Side Note: The quotes aren't generated by the #{} syntax - you have quotes in your variable declaration. In your case, those quotes aren't needed, you could simply remove them. That wont help your problem, though, because Sass doesn't let you interpolate variable names. If you ever do need quotes in the declaration and want to remove them later, use #{unquote($string)}.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Do we have any idea when a stable release of 3.3 comes out? No idea how that affects what I'm using for a framework, which is Foundation? – Tom Belknap Jan 21 '14 at 13:04
  • Oh yeah, that'll be amazing. – brbcoding Jan 21 '14 at 14:12
  • Open source projects don't usually announce launch dates, but they already have release candidates out, so it shouldn't be too long. I imagine the Foundation people are following along and preparing for the update, but I don't know for sure. – Miriam Suzanne Jan 23 '14 at 02:27