LESS not parsing variable for javascript interaction

Question

I cannot get LESS to correctly parse a variable and then pass it to javascript.

@bp1 : "lorem";
@bp2 : "ipsum";
@bp3 : "foo";
@bp4 : "bar";
@bp5 : "baz";
@bp6 : "ham";

@bpN: 6;

.loopingClass (@index) when (@index > 0) {
  @val: ~'@{bp@{index}}';
  @value: ~'"@{val}".toUpperCase()';
  @media screen and (min-width: @value) {
    body { font-family: ~'"@{bp@{index}}"'; }
  }
  .loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@bpN);

The follow code results in:

@media screen and (min-width: "ham".toUpperCase()) {
  body {
    font-family: "ham";
  }
}
@media screen and (min-width: "baz".toUpperCase()) {
  body {
    font-family: "baz";
  }
}
@media screen and (min-width: "bar".toUpperCase()) {
  body {
    font-family: "bar";
  }
}
@media screen and (min-width: "foo".toUpperCase()) {
  body {
    font-family: "foo";
  }
}
@media screen and (min-width: "ipsum".toUpperCase()) {
  body {
    font-family: "ipsum";
  }
}
@media screen and (min-width: "lorem".toUpperCase()) {
  body {
    font-family: "lorem";
  }
}

I'm trying to dynamically set the variable, and then interact with it with javascript. What am I missing here? Is this even possible with LESS?

seven-phases-max · Accepted Answer · 2013-12-20 18:08:14Z

3

The correct syntax for inline javascript evaluation is using backticks. So with other minor fixes your code becomes:

@bp1 : "lorem";
@bp2 : "ipsum";
@bp3 : "foo";
@bp4 : "bar";
@bp5 : "baz";
@bp6 : "ham";

@bpN: 6;

.loopingClass (@index) when (@index > 0) {
  @val_: 'bp@{index}';
  @val: @@val_;
  @value: ~`@{val}.toUpperCase()`;
  @media screen and (min-width: @value) {
    body { font-family: @val; }
  }
  .loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@bpN);

And with quoting overuse removal and further optimizations (LESS 1.4.0 and higher):

@bp: "lorem",
     "ipsum",
     "foo",
     "bar",
     "baz",
     "ham";

@bpN: 6;

.loopingClass(@bpN);
.loopingClass(@index) when (@index > 0) {
    .loopingClass(@index - 1);

    @lowercase: extract(@bp, @index);
    @uppercase: ~`@{lowercase}.toUpperCase()`;

    @media screen and (min-width: @uppercase) {
        body {font-family: @lowercase}
    }
}

edited Dec 20, 2013 at 18:08

answered Dec 20, 2013 at 17:27

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bjork24 Over a year ago

That works, but the @uppercase variable is being wrapped in quotes. Is there a way to avoid that, or do I need to save the output to another variable and then .replace('"','')?

seven-phases-max Over a year ago

Ah, to remove quotes you can use escaping with backticks too.. (Hmm, I guess I did miss that this was your intention in original example). I've updated my answer with that.

Collectives™ on Stack Overflow

LESS not parsing variable for javascript interaction

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related