Map property lookup by variable

[dmgawel]

Thanks to the lookup syntax I can access ruleset/mixin property by its name (@sizes[mobile]). Additionally I can access ruleset/mixin variable using @@variable syntax. What I'd like to do is lookup a property with variable interpolation, like that:

@sizes: {
  mobile: 320px;
  tablet: 768px;
  desktop: 1024px;
}

@lookup-size: mobile;

.test {
  width: @sizes[@{lookup-size}];
}

Which should result in:

.test {
  width: 320px;
}

It would be very useful for iterating over properties. Here is my complete real-life use case:

// Defining breakpoints
@breakpoints: {
  xs: 0;
  sm: 36rem;
  md: 48rem;
  lg: 75rem;
  xl: 85rem;
};

// Generating helper classes based on breakpoints
each(@breakpoints, {
  .wrap-@{key} {
    max-width: @value;
  }
});

// Mixin
.respond(@size; @rules) {
  @media screen and (min-width: @breakpoints[@{size}]) {
    @rules();
  }
}

// Using mixin
.test {
  .respond(xl, {
    color: blue;
  });
}

[matthew-dean]

@dmgawel You can do that with variable property syntax e.g.

@sizes: {
  mobile: 320px;
  tablet: 768px;
  desktop: 1024px;
}

@lookup-size: mobile;

.test {
  width: @sizes[$@lookup-size];
}