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.

1

2 Answers 2

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;
}
0
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)}.

3
  • 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? Commented Jan 21, 2014 at 13:04
  • Oh yeah, that'll be amazing.
    – brbcoding
    Commented Jan 21, 2014 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. Commented Jan 23, 2014 at 2:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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