How can I use SASS @for loops to pass values to a Breakpoint include?

Question

I am trying to set up a loop that will create a set of classes, using another loop that I've set up, for each of the breakpoints I've defined. These are the BP's

$mobileMedium : 480px;
$tabletVertical : 768px;
$desktopNormal : 1024px;
$desktopWide : 1200px;

And this is my scss.

   @each $bpName in "mobileMedium", "tabletVertical", "desktopNormal", "desktopWide"{
        @include breakpoint($$bpName) {
        @include generate("$bpName", "Container", "width");
        }
   }

I was hoping for something like this (example):

@media (min-width: 768px) {
  .tabletVerticalContainer-1_12 {
    width: 8.33333%;
  }

But this is what Terminal returns:

error sass/screen.scss (Line 36 of sass/_grid.scss: 
Invalid CSS after "...ude breakpoint(": expected ")", was "$$bpName) {")

I guess it boils down to how I can combine the both text (the '$') and the variable in the argument.

Any ideas?

score 1 · Accepted Answer · answered Sep 27 '13 at 18:36

You can't do variable name interpolation, although Sass 3.3 will introduce a map feature that you'll be able to use to get your desired effect (see https://github.com/nex3/sass/issues/642).

For now, instead of iterating over a list of strings, try iterating over a list of lists of string/variable pairs:

@each $breakpoint in "mobileMedium" $mobileMedium, "tabletVertical" $tabletVertical, "desktopNormal" $desktopNormal, "desktopWide" $desktopWide {
    @include breakpoint(nth($breakpoint, 2)) {
        @include generate(nth($breakpoint, 1), "Container", "width");
    }
}

(I don't know what the generate mixin does, I assume from your example that you want the first argument to be a string though.)

How can I use SASS @for loops to pass values to a Breakpoint include?

1 Answers1