0

I'm trying to use a loop to generate the relevant CSS using defined Less vars. However I'm struggling as I'm slowly getting used to Less after years with scss and could use another pair of eyes since I can't seem to find a fitting example.

So say you have Less like this (except in reality my less vars are in a separate file and imported via @import before the loop);

@spacing-xsmall: .25rem; // 4px
@spacing-small: .5rem; // 8px
@spacing-medium: 1rem; // 16px
@spacing-medium-large: 1.5rem; // 24px
@spacing-large: 2rem; // 32px
@spacing-xlarge: 2.5rem; // 40px
@spacing-xxlarge: 4rem; // 64px

@sizes: xsmall, small, medium, medium-large, large, xlarge, xxlarge;

.init-spacing(@i) when (@i > 0) {
  
  @size: extract(@sizes, @i);
  @space: ~"@spacing-@{size}";
  
  .margin-@{size} { margin: @space }

  .padding-@{size} { padding: @space; }
  
  .init-spacing(@i - 1);
}

.init-spacing(length(@sizes));

This produces output like this;

.margin-xxlarge {
  margin: @spacing-xxlarge;
}
.padding-xxlarge {
  padding: @spacing-xxlarge;
}
....

Except obviously in the CSS output I would want the variable VALUE instead so the output would be like;

.margin-xxlarge {
  margin: 4rem;
}
.padding-xxlarge {
  padding: 4rem;
}
....

How can I accomplish this with Less? I know the string interpolation is a likely culprit but am a bit stuck in the docs as it were.

Here's a Codepen to tinker with for a reproducible example of the issue.

I tried this answer but the output just returns like .class { margin: [object, object] } along with a couple other similar I found but can't seem to get my scenario covered where I loop an array like I want to do since my existing variables may not be just an easy index number, and I think that's part of where I'm falling short in a Parametric mixin that would work here. I'm just searching for the nuance I'm missing here to generate the results intended in a rather generic way so I can apply it in other similar instances.

Chris W.
  • 22,835
  • 3
  • 60
  • 94
  • 1
    Very Great Words in your Bio keep the Goodwill Up. I liked your question. Actually, I only use CSS and if there is a requirement for any other processor I'd convert them using an external compiler. Main Reason to write this is to say keep going. You are Good Guy. – ash May 12 '23 at 16:11
  • 1
    @ash Cheers for that, and likewise. Have a wonderful weekend. :) – Chris W. May 13 '23 at 00:26

1 Answers1

1

Why not use variable variables ?

@spacing-xsmall: .25rem; // 4px
@spacing-small: .5rem; // 8px
@spacing-medium: 1rem; // 16px
@spacing-medium-large: 1.5rem; // 24px
@spacing-large: 2rem; // 32px
@spacing-xlarge: 2.5rem; // 40px
@spacing-xxlarge: 4rem; // 64px

@sizes: xsmall, small, medium, medium-large, large, xlarge, xxlarge;

.init-spacing(@i) when (@i > 0) {
  
  @size: extract(@sizes, @i);
  @space: ~"spacing-@{size}";
  
  .margin-@{size} { margin: @@space }

  .padding-@{size} { padding: @@space; }
  
  .init-spacing(@i - 1);
}

.init-spacing(length(@sizes));

I got (with a preview)

.margin-xxlarge {
  margin: 4rem;
}
.padding-xxlarge {
  padding: 4rem;
}
.margin-xlarge {
  margin: 2.5rem;
}
.padding-xlarge {
  padding: 2.5rem;
}
.margin-large {
  margin: 2rem;
}
.padding-large {
  padding: 2rem;
}
.margin-medium-large {
  margin: 1.5rem;
}
.padding-medium-large {
  padding: 1.5rem;
}
.margin-medium {
  margin: 1rem;
}
.padding-medium {
  padding: 1rem;
}
.margin-small {
  margin: 0.5rem;
}
.padding-small {
  padding: 0.5rem;
}
.margin-xsmall {
  margin: 0.25rem;
}
.padding-xsmall {
  padding: 0.25rem;
}
Joel
  • 1,187
  • 1
  • 6
  • 15