0

Im using LESS to dynamically create a series of classes. I can't seem to combine two variables to match one variable that I have already defined.

@import(for.less);

The pre-defined variables:

@letter-spacing--base: 0;
@letter-spacing--xs:   0.2px;

The for loop loops through this array:

@classSizes: base, xs;

The loop that creates the classes:

.letter-spacing--{
    .for(@classSizes); .-each(@value) {

        @name: extract(@value, 1);

        @valPrefix: ~"letter-spacing--";
        @valSuffix: @value;

        &@{name}{
            letter-spacing: ~"@" @valPrefix @valSuffix;
        }
    }
}

This currently outputs:

.letter-spacing--base {
    letter-spacing: @ letter-spacing-- base;
}
.letter-spacing--xs {
    letter-spacing: @ letter-spacing-- xs;
}

It's outputting spaces in between the variables so it doesn't match the variables. Is there any way I can remove the spaces? Or maybe there is a better way of going about this.

Thanks

Andrew Puig
  • 1
  • 2
  • 1
    You should use it as `letter-spacing: ~"@{@{valPrefix}@{valSuffix}}";`. String concatenations should always happen like in [this answer](http://stackoverflow.com/questions/10256412/concatenate-strings-in-less?rq=1). Once it is done, you have to again wrap it inside another `@{}` for it to get evaluated. – Harry Feb 08 '16 at 15:19
  • This will work `letter-spacing: ~"@{@{valPrefix}-@{valSuffix}}";`, though this is just an ugly kludge and not recommended (for various reasons). – seven-phases-max Feb 08 '16 at 15:35
  • More proper way is to use ["Variable Reference"](http://lesscss.org/features/#variables-feature-variable-names) (e.g. like [this](http://less2css.org/#%7B%22less%22%3A%22%40letter-spacing--base%3A%200%3B%5Cn%40letter-spacing--xs%3A%20%20%200.2px%3B%5Cn%5Cn.some(xs)%3B%5Cn%5Cn.some(%40id)%20%7B%5Cn%20%20%5Ct%40prefix%3A%20letter-spacing%3B%5Cn%20%20%5Ct%40name%3A%20~%5C%22%40%7Bprefix%7D--%40%7Bid%7D%5C%22%3B%5Cn%20%20%5Ct.%40%7Bname%7D%7B%5Cn%20%20%20%20%5Ctletter-spacing%3A%20%40%40name%3B%5Cn%20%20%5Ct%7D%20%20%5Cn%7D%22%7D)). – seven-phases-max Feb 08 '16 at 15:35
  • And *in general* see the [discussion at this issue](https://github.com/less/less.js/issues/2702) to find out why "Using hardcoded global variable names to generate an arbitrary set of rulesets" is a flawed approach in a long run. – seven-phases-max Feb 08 '16 at 15:39
  • I.e. in summary (though it goes an offtopic for the Q, sorry) it would make sense to rewrite the stuff [like this](https://gist.github.com/seven-phases-max/9b09c78b688d2f8900b1) for example (just an *example*, w/o enforcing any particular trick you'll see there *except* the *list* variable itself). – seven-phases-max Feb 08 '16 at 16:12
  • Thanks for the help @Harry. – Andrew Puig Feb 08 '16 at 16:36
  • And thanks for the insight @seven-phases-max – Andrew Puig Feb 08 '16 at 16:36
  • @seven-phases-max regarding the example you linked me. Is it possible to fetch the letter-spacing array by name? Ex function: .get(letter-spacing, base); – Andrew Puig Feb 08 '16 at 20:47
  • @Andrew I'm not sure about "fetch the letter-spacing array by name" meaning, but probably you mean something [like this](https://github.com/seven-phases-max/less-plugin-lists/blob/master/docs/ref.md#at)... – seven-phases-max Feb 08 '16 at 22:09

0 Answers0