Less - How to replace integer with a string?

100 views Asked by At

I have a LESS variable: @columns: 12;

I create a dynamic class name out of it: .one-@{columns} {} // returns .one-12 {}

How do I replace the 12 with a string "twelfth"

Pseudo Code

.one-@{replace(columns, "twelfth")} {}

The result will be .one-twelfth {}

Advice will be appreciated!

2

There are 2 answers

4
seven-phases-max On BEST ANSWER

Assuming (as revealed in comments) you can't change the value of @columns variable itself and its possible values are not infinite, a trivial integer to string (or anything else) conversion table (a simple list) will do the trick:

@columns: 12;
@columns-string: extract(@i2s, @columns);

// usage:
.class-@{columns-string} {
    /* ... */
}

// the table:
@i2s:
    one
    two
    three
    four
    five
    six
    seven
    eight
    nine
    ten
    eleven
    twelve
    thirteen
    fourteen
    fifteen
    sixteen
    seventeen
    eighteen
    nineteen
    twenty
    ;
1
Blix On

The solution to this is to use array:

Instead of @columns: 12

I do @columns: 12, twelfth.

Then I extract values:

@columns-number: extract(@columns, 1);
@columns-class: extract(@columns, 2);

The I can target value and a class name with mixin:

.@{columns-class} {
   .column(@columns-number);
}